@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap');

/* sillysky.net Theme — kein Tailwind, kein npm-Build.
   Eigenes CSS, inspiriert vom Original-UIkit-Look aber eigenstaendig.
   Farbschema: Header #75AADB (sillysky-blau), Akzent dunkler. */

:root {
  --ss-blue: #75AADB;
  --ss-blue-dark: #4a8bc2;
  --ss-blue-darker: #10387a;
  --ss-blue-light: #e8f1fa;
  --ss-bg: #fafafa;
  --ss-fg: #1a1a1a;
  --ss-muted: #666;
  --ss-border: #e1e4e8;
  --ss-code-bg: #f6f8fa;
  --ss-accent: #27a3a3;
  --ss-warn: #d4691a;
  --ss-error-bg: #fff3cd;
  --ss-error-fg: #856404;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: var(--ss-bg);
  color: var(--ss-fg);
  line-height: 1.6;
  font-size: 16px;
}

a { color: var(--ss-blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ====================== Generated sitemap ====================== */
.ss-sitemap-intro { max-width: 720px; color: #526b7f; font-size: 1.08rem; line-height: 1.7; }
.ss-sitemap-tree, .ss-sitemap-tree ul { margin: 0; padding: 0; list-style: none; }
.ss-sitemap-tree { margin-top: 2rem; border-top: 1px solid #dce8ec; }
.ss-sitemap-tree ul { margin-left: 1.25rem; border-left: 1px solid #cbdde5; }
.ss-sitemap-tree li { margin: 0; padding: .15rem 0 .15rem 1.2rem; position: relative; }
.ss-sitemap-tree > li { padding-left: 0; }
.ss-sitemap-tree li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .75rem; border-top: 1px solid #cbdde5; }
.ss-sitemap-tree > li::before { display: none; }
.ss-sitemap-tree a, .ss-sitemap-tree span { display: inline-block; padding: .45rem .65rem; color: #167b83; font-weight: 650; text-decoration: none; }
.ss-sitemap-tree span { color: #526b7f; }
.ss-sitemap-tree a:hover { color: #102a43; background: #e8f4f3; text-decoration: none; }

/* ====================== Modern product header ====================== */
.ss-modern-header { background: rgba(255,255,255,.94); border-bottom: 1px solid #dce8ec; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px); }
.ss-modern-header-inner { max-width: 1180px; margin: 0 auto; padding: .95rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.ss-modern-brand { display: inline-flex; align-items: center; gap: .7rem; color: #102a43; text-decoration: none; }
.ss-modern-brand:hover { text-decoration: none; }
.ss-modern-brand img { border-radius: 10px; display: block; }
.ss-modern-brand span { display: flex; flex-direction: column; line-height: 1.05; }
.ss-modern-brand b { font-size: 1.25rem; letter-spacing: -.035em; }
.ss-modern-brand i { color: #102a43; font-style: normal; }
.ss-modern-brand strong { color: #167b83; }
.ss-modern-brand small { margin-top: .25rem; color: #7890a1; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.ss-modern-nav { display: flex; align-items: center; gap: 1.4rem; font-size: .88rem; }
.ss-modern-nav a { color: #526b7f; font-weight: 650; text-decoration: none; }
.ss-modern-nav a:hover { color: #167b83; text-decoration: none; }
.ss-modern-nav-contact { padding: .55rem .85rem; border: 1px solid #b9d9d8; border-radius: 3px; color: #167b83 !important; }
.ss-modern-nav-contact span { margin-left: .25rem; }
@media (max-width: 760px) { .ss-modern-header-inner { padding: .75rem 1.2rem; } .ss-modern-nav { gap: .7rem; } .ss-modern-nav a:nth-child(-n+2) { display: none; } .ss-modern-nav a { font-size: .78rem; } }

/* ====================== Header ====================== */

.ss-header {
  background: var(--ss-blue);
  color: white;
  min-height: 120px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-bottom: 3px solid var(--ss-blue-darker);
}
.ss-header-inner {
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.ss-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: white;
  text-decoration: none;
}
.ss-brand:hover { text-decoration: none; }
.ss-brand-logo {
  height: 70px;
  width: 70px;
  border-radius: 8px;
  background: white;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.ss-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.ss-brand-name {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ss-brand-name .ss-silly { color: white; }
.ss-brand-name .ss-sky { color: var(--ss-blue-darker); text-shadow: 0 1px 0 white; }
.ss-brand-tagline {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 0.15rem;
}

/* Search */
.ss-search {
  margin-left: auto;
  position: relative;
  flex: 0 1 320px;
}
.ss-search input {
  width: 100%;
  padding: 0.6rem 0.9rem 0.6rem 2.2rem;
  font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  background: rgba(255,255,255,0.95);
  color: var(--ss-fg);
  outline: none;
  transition: border-color 0.15s;
}
.ss-search input:focus { border-color: var(--ss-blue-darker); box-shadow: 0 0 0 3px rgba(16,56,122,0.15); }
.ss-search-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  opacity: 0.6;
}

.ss-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--ss-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 100;
  display: none;
}
.ss-search-results.open { display: block; }
.ss-search-result {
  display: block;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--ss-border);
  color: var(--ss-fg);
  text-decoration: none;
}
.ss-search-result:hover { background: var(--ss-blue-light); text-decoration: none; }
.ss-search-result:last-child { border-bottom: none; }
.ss-search-result-title { font-weight: 600; }
.ss-search-result-link {
  display: inline-block;
  font-family: monospace;
  font-size: 0.78rem;
  background: var(--ss-code-bg);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  margin-right: 0.4rem;
  color: var(--ss-muted);
}
.ss-search-empty {
  padding: 1rem;
  text-align: center;
  color: var(--ss-muted);
  font-size: 0.9rem;
}

/* ====================== Main + Layout ====================== */

.ss-main {
  /* The original documentation used a noticeably wider reading frame. */
  max-width: 88rem;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

.ss-breadcrumb {
  font-size: 0.9rem;
  color: var(--ss-muted);
  margin-bottom: 1rem;
}
.ss-breadcrumb a { color: var(--ss-muted); }
.ss-breadcrumb a:hover { color: var(--ss-blue-dark); }
.ss-breadcrumb-sep { margin: 0 0.4rem; opacity: 0.5; }

.ss-page-title {
  font-size: 2.2rem;
  margin: 0 0 0.5rem;
  color: var(--ss-fg);
  line-height: 1.2;
}
.ss-page-summary {
  font-size: 1.05rem;
  color: var(--ss-muted);
  font-style: italic;
  margin: 0 0 2rem;
}

.ss-content {
  font-size: 1rem;
}
.ss-content h1 { font-size: 1.8rem; margin-top: 0; }
.ss-content h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ss-border);
}
.ss-content h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.ss-content p { margin: 0.75rem 0; }
.ss-content ul, .ss-content ol { padding-left: 1.5rem; }
.ss-content li { margin: 0.25rem 0; }

/* Record tables (for example "Slot Description"): readable on desktop
   and transformed into stacked cards on narrow screens. */
.ss-content table {
  width: 100%;
  margin: 1.5rem 0 2rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-size: 0.92rem;
  line-height: 1.45;
}
.ss-content table th,
.ss-content table td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-right: 1px solid var(--ss-border);
  border-bottom: 1px solid var(--ss-border);
  overflow-wrap: anywhere;
}
.ss-content table th:last-child,
.ss-content table td:last-child { border-right: 0; }
.ss-content table tr:last-child td { border-bottom: 0; }
.ss-content table thead th {
  background: var(--ss-blue-light);
  color: var(--ss-blue-darker);
  font-weight: 700;
  white-space: normal;
}
.ss-content table tbody tr:nth-child(even) { background: #fbfcfe; }
.ss-content table tbody tr:hover { background: #f0f7fb; }

@media (max-width: 700px) {
  .ss-content table {
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.95rem;
  }
  .ss-content table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .ss-content table,
  .ss-content table tbody,
  .ss-content table tr,
  .ss-content table td {
    display: block;
    width: 100%;
  }
  .ss-content table tr {
    margin: 0 0 1rem;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 42, 67, 0.06);
    overflow: hidden;
  }
  .ss-content table tbody tr:nth-child(even),
  .ss-content table tbody tr:hover { background: #fff; }
  .ss-content table td,
  .ss-content table td:last-child {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-right: 0;
    border-bottom: 1px solid var(--ss-border);
  }
  .ss-content table td:last-child { border-bottom: 0; }
  .ss-content table td::before {
    content: attr(data-label);
    color: var(--ss-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

.ss-content code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--ss-code-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--ss-border);
}
.ss-content pre {
  background: #f0f3f8;
  border: 1px solid #c5cdd9;
  border-left: 4px solid var(--ss-blue-dark, #4a8bc2);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  margin: 1rem 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ss-content pre code {
  display: block;
  padding: 0.9rem 1rem;
  background: none;
  border: none;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-x: auto;
  color: #1a1a1a;
}
.ss-code-container {
  position: relative;
}
.ss-copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--ss-blue-dark);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.ss-copy-button:hover { opacity: 1; }
.ss-copy-button.copied { background: var(--ss-accent); }

.ss-content a { color: var(--ss-blue-dark); }
.ss-content a:hover { text-decoration: underline; }

.ss-content img { max-width: 100%; height: auto; border-radius: 4px; }

/* Product-facing license pages use the same readable measure as modern articles. */
.ss-modern-page .ss-modern-content {
  max-width: 52rem;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.ss-modern-page .ss-modern-content > p:first-child img {
  display: block;
  width: min(100%, 42rem);
  margin: 0 auto 2rem;
}
.ss-modern-page .ss-modern-content blockquote {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid #258c91;
  background: #eef5f8;
  color: #29465a;
}
.ss-modern-page .ss-modern-content blockquote p { margin: 0.25rem 0; }

.ss-error {
  background: var(--ss-error-bg);
  color: var(--ss-error-fg);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.85em;
  border: 1px solid #ffeaa7;
}

/* Brand-Marker sind im MD jetzt als Inline-Code (`) gerendert.
   Kein zusaetzzliches CSS noetig. */

/* ====================== Cards (3-Spalten-Grid) ====================== */

.ss-cards-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--ss-blue-light);
}
.ss-cards-heading {
  font-size: 1.35rem;
  margin: 0 0 1.25rem;
  color: var(--ss-blue-darker);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ss-cards-heading::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.3em;
  background: var(--ss-blue);
  border-radius: 2px;
}
.ss-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .ss-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ss-cards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ss-cards-grid { gap: 0.85rem; }
  .ss-card { padding: 1rem 1.25rem; }
  .ss-card::after { top: 1rem; right: 1rem; }
}
.ss-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--ss-border);
  border-left: 4px solid var(--ss-blue);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: var(--ss-fg);
  transition: all 0.2s ease;
  min-height: 7rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
}
.ss-card::after {
  content: "→";
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.25rem;
  color: var(--ss-blue);
  opacity: 0.4;
  transition: all 0.2s ease;
}
.ss-card:hover {
  border-left-color: var(--ss-blue-darker);
  border-color: var(--ss-blue-light);
  background: linear-gradient(135deg, white 0%, var(--ss-blue-light) 100%);
  box-shadow: 0 4px 16px rgba(74, 139, 194, 0.18);
  text-decoration: none;
  transform: translateY(-2px);
}
.ss-card:hover::after {
  opacity: 1;
  transform: translateX(4px);
  color: var(--ss-blue-darker);
}
.ss-card-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--ss-blue-dark);
}
.ss-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--ss-fg);
  padding-right: 1.5rem;
}
.ss-card:hover .ss-card-title { color: var(--ss-blue-darker); }
.ss-card-text {
  font-size: 0.88rem;
  color: var(--ss-muted);
  line-height: 1.45;
  margin: 0;
}
.ss-cards-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ss-muted);
  padding: 2rem;
  font-style: italic;
}

/* ====================== Footer ====================== */

.ss-footer {
  border-top: 1px solid var(--ss-border);
  background: white;
  padding: 1.5rem 0;
  color: var(--ss-muted);
  font-size: 0.85rem;
  margin-top: 4rem;
}
.ss-footer-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.ss-footer a { color: var(--ss-blue-dark); }

/* ====================== Home-spezifisch ====================== */

.ss-home-hero {
  text-align: center;
  padding: 2rem 0 1rem;
}
.ss-home-hero h1 {
  font-size: 2.4rem;
  margin: 0 0 0.5rem;
}
.ss-home-hero p {
  font-size: 1.1rem;
  color: var(--ss-muted);
  max-width: 40rem;
  margin: 0 auto;
}
.ss-section-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.75rem;
}
.ss-section-list a {
  display: block;
  padding: 1rem 1.2rem;
  background: white;
  border: 1px solid var(--ss-border);
  border-radius: 6px;
  color: var(--ss-fg);
}
.ss-section-list a:hover {
  border-color: var(--ss-blue);
  background: var(--ss-blue-light);
  text-decoration: none;
}
.ss-section-list-title { font-weight: 600; display: block; }
.ss-section-list-count {
  display: inline-block;
  font-size: 0.8rem;
  background: var(--ss-code-bg);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  color: var(--ss-muted);
  margin-top: 0.3rem;
}

/* ====================== Mobile ====================== */

@media (max-width: 900px) {
  .ss-main { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 600px) {
  .ss-header-inner { padding: 0.75rem 1rem; gap: 0.75rem; }
  .ss-brand-text { display: none; }
  .ss-search { flex: 1 1 100%; margin-left: 0; }
  .ss-main { padding: 1.5rem 1rem 3rem; }
  .ss-page-title { font-size: 1.7rem; }
}

/* ====================== Card-Text (HTML-Listen etc.) ====================== */
/* Tailwind-Preflight setzt list-style: none fuer alle <ul>. Hier
   restaurieren wir Bullets fuer HTML-Listen in Card-Bodyfiles. */
.ss-card-text ul { list-style: disc; padding-left: 1.25rem; margin: 0.25rem 0; }
.ss-card-text ol { list-style: decimal; padding-left: 1.25rem; margin: 0.25rem 0; }
.ss-card-text li { margin: 0.1rem 0; }
.ss-card-text p { margin: 0.25rem 0; }

/* ====================== Doku-Header (Original-Look) ====================== */
.ss-doc-header {
  position: relative;
  background: var(--headercolor, #75AADB);
  min-height: 140px;
}
@media (min-width: 640px) {
  .ss-doc-header { min-height: 200px; }
}
.ss-doc-header-stripe {
  background: #374A5F;
  height: 5px;
  width: 100%;
}
.ss-doc-header-main {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  min-height: inherit;
}
.ss-doc-header-brand-link {
  position: absolute;
  top: 40px;
  left: 20px;
  z-index: 14;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: white;
}
.ss-doc-header-brand-link:hover { text-decoration: none; }
.ss-doc-header-logo {
  height: 96px;
  width: 96px;
  object-fit: contain;
}
@media (min-width: 640px) {
  .ss-doc-header-logo { height: 132px; width: 132px; }
}
.ss-doc-header-brand-text {
  font-weight: 900;
  line-height: 1;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-family: 'Comic Relief', sans-serif;
}
.ss-doc-brand-1 {
  /* Original: #ss-logo006-1 — stronger blue/violet/magenta identity */
  font-size: 4rem;
  font-weight: 900;
  margin: 0;
  line-height: 1.3;
  display: block;
  background: linear-gradient(45deg, #06f 0%, #2455e6 27%, #6a2db8 58%, #c2188b 82%, #06f 100%);
  background-size: 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-animation 10s infinite alternate;
  text-decoration: none;
  letter-spacing: normal;
  text-shadow: none;
}

/* The first documentation page restores the original Argentina blue. */
.ss-doc-first .ss-doc-header,
.ss-doc-first .ss-doc-footer {
  --headercolor: #75AADB;
  background: #75AADB;
}
.ss-doc-brand-2 {
  /* Original: #ss-logo006-2 */
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.2em;
  color: #555;
  text-transform: uppercase;
  display: block;
  line-height: 1.3;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Offcanvas-Toggle im Doku-Header */
.ss-doc-offcanvas-btn {
  position: absolute;
  top: 30px;
  right: 20px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
}
.ss-doc-offcanvas-btn:hover {
  background: rgba(255,255,255,0.25);
}
.ss-doc-offcanvas-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ====================== Doku-Footer (Original-Look) ====================== */
.ss-doc-footer {
  background: var(--headercolor, #75AADB);
  color: white;
  padding: 1.5rem 1.5rem 1rem;
}
.ss-doc-footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 2rem;
}
@media (min-width: 640px) {
  .ss-doc-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 3rem;
    max-width: 720px;
  }
}
.ss-doc-footer-link {
  color: white;
  text-decoration: none;
  padding: 0;
  margin: 0;
  display: block;
  opacity: 0.95;
  transition: opacity 0.15s;
  line-height: 1.6;
  font-size: 0.95rem;
}
.ss-doc-footer-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ====================== Suche im Doku-Header ====================== */
.ss-doc-header-search {
  position: absolute;
  top: 30px;
  right: 130px;  /* Platz für Offcanvas-Button rechts */
  z-index: 15;
  width: 320px;
  max-width: calc(100vw - 320px - 60px);
}
@media (max-width: 700px) {
  .ss-doc-header-search {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 130px;
  }
}
.ss-doc-header-search-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ss-fg, #333);
  pointer-events: none;
}
.ss-doc-header-search input[type="search"] {
  width: 100%;
  padding: 0.6rem 0.9rem 0.6rem 2.2rem;
  font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  background: rgba(255,255,255,0.95);
  color: var(--ss-fg, #333);
  outline: none;
  transition: border-color 0.15s;
}
.ss-doc-header-search input[type="search"]:focus {
  border-color: var(--ss-blue-darker, #1a3a6e);
  box-shadow: 0 0 0 3px rgba(16,56,122,0.15);
}

/* ====================== Offcanvas-Toggle im Doku-Header ====================== */
/* Im normalen Header ist er inline-flex, aber im Doku-Header
   (400px, fixed-position-Logo) muss er absolut rechts oben sitzen. */
.ss-doc-header #ss-menu-toggle {
  position: absolute;
  top: 30px;
  right: 20px;
  z-index: 15;
}
@media (max-width: 700px) {
  .ss-doc-header #ss-menu-toggle {
    top: 60px;
    right: 16px;
  }
}

/* ====================== Offcanvas-Toggle im Doku-Header ====================== */
/* Im normalen Header (header.html) sitzt der Button inline-flex in der Header-Reihe.
   Im Doku-Header (header-doc.html) muss er absolut rechts oben sein.
   Wir nutzen eine eigene Klasse "ss-doc-menu-toggle-style", um den Default-Stil
   nicht zu beeinflussen. */
.ss-doc-menu-toggle-style {
  position: absolute;
  top: 30px;
  right: 20px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ss-doc-menu-toggle-style:hover {
  background: #ffffff;
  color: var(--offcanvas-accent, #2563eb);
  border-color: #ffffff;
}
.ss-doc-menu-toggle-style:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .ss-doc-menu-toggle-style {
    top: 60px;
    right: 16px;
  }
}

/* ====================== Link-Farbe im Doku-Bereich ====================== */
/* Original-PW: alle Links innerhalb des Doku-Body nutzen getColorLink().
   Wir setzen die Farbe per CSS-Variable, gesetzt durch random-color.js.
   Selektor: nur innerhalb von .ss-doc, nicht im Header/Footer.
*/
.ss-doc main a:not(.ss-doc-footer-link):not(.ss-doc-offcanvas-btn):not(.ss-doc-menu-toggle-style) {
  color: var(--linkcolor, var(--ss-blue-darker, #1a3a6e));
}
.ss-doc main a:hover:not(.ss-doc-footer-link) {
  filter: brightness(0.85);
}

/* ====================== Sitemap ====================== */
.ss-sitemap-tree {
  font-size: 0.95rem;
  line-height: 1.5;
}
.ss-sitemap-item {
  margin: 0;
  padding: 0;
}
.ss-sitemap-item a,
.ss-sitemap-item .ss-sitemap-label {
  display: inline-block;
  padding: 0.15rem 0;
  color: var(--ss-blue-dark);
  text-decoration: none;
  font-weight: 500;
}
.ss-sitemap-item a:hover {
  text-decoration: underline;
  color: var(--ss-blue-darker);
}
.ss-sitemap-children {
  padding-left: 1.5rem;
  border-left: 1px solid var(--ss-border);
  margin: 0.1rem 0 0.4rem 0.5rem;
}
.ss-sitemap-item.level-0 > a,
.ss-sitemap-item.level-0 > .ss-sitemap-label {
  font-weight: 700;
  color: var(--ss-fg);
  font-size: 1.3rem;
  padding: 0.4rem 0 0.2rem;
  display: block;
  border-bottom: 3px solid var(--ss-blue);
  margin: 0 0 0.6rem;
}
.ss-sitemap-item.level-1 > a,
.ss-sitemap-item.level-1 > .ss-sitemap-label {
  font-weight: 700;
  color: var(--ss-fg);
  font-size: 1.05rem;
  padding: 0.4rem 0 0.2rem;
  display: block;
  border-bottom: 1px solid var(--ss-blue-light);
  margin: 0.7rem 0 0.3rem;
}
.ss-sitemap-item.level-2 a { font-weight: 400; font-size: 0.9rem; }
.ss-sitemap-item.level-3 a { color: var(--ss-muted); font-size: 0.88rem; }
.ss-sitemap-item.level-4 a { color: var(--ss-muted); font-size: 0.85rem; padding-left: 1rem; }

/* ====================== Frontpage (Landing-Layout) ====================== */
.ss-frontpage {
  --fp-blue: #4a8bc2;
  --fp-blue-dark: #2c5f8f;
  --fp-blue-darker: #1a3a5c;
  --fp-blue-light: #e6f0f9;
  --fp-fg: #1a1a1a;
  --fp-muted: #5a6470;
  --fp-border: #d5dde6;
  --fp-bg: #ffffff;
  --fp-bg-alt: #f5f8fc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--fp-fg);
  line-height: 1.55;
}
.ss-frontpage * { box-sizing: border-box; }

.ss-fp-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- HERO ---------- */
.ss-fp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #4a8bc2 0%, #2c5f8f 100%);
  color: white;
  padding: 4rem 0 5rem;
  min-height: 560px;
  display: flex;
  align-items: center;
}
@media (max-width: 720px) { .ss-fp-hero { min-height: 480px; padding: 3rem 0 4rem; } }
.ss-fp-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 860px) {
  .ss-fp-hero-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .ss-fp-cta-row { justify-content: center; }
  .ss-fp-statbar { justify-content: center; }
}
.ss-fp-hero-content { max-width: 720px; }
.ss-fp-h1 {
  font-size: 3.6rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.ss-fp-tagline {
  font-size: 1.4rem;
  margin: 0 0 1.5rem;
  opacity: 0.92;
  font-weight: 300;
}
.ss-fp-lead {
  font-size: 1.05rem;
  margin: 0 0 1.8rem;
  opacity: 0.95;
  max-width: 38rem;
}
@media (max-width: 860px) { .ss-fp-lead { margin-left: auto; margin-right: auto; } }

.ss-fp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.ss-fp-btn {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
  border: 2px solid transparent;
}
.ss-fp-btn-primary {
  background: white;
  color: var(--fp-blue-dark);
}
.ss-fp-btn-primary:hover {
  background: var(--fp-bg-alt);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.ss-fp-btn-secondary {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.4);
}
.ss-fp-btn-secondary:hover {
  background: rgba(255,255,255,0.25);
  border-color: white;
}
.ss-fp-btn-ghost {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.5);
}
.ss-fp-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: white;
}

.ss-fp-statbar {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.ss-fp-statbar strong {
  color: white;
  font-weight: 700;
  font-size: 1.05rem;
  margin-right: 0.2rem;
}
.ss-fp-statsep { opacity: 0.5; }

.ss-fp-hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ss-fp-hero-art img {
  max-width: 100%;
  max-height: 380px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  padding: 0.5rem;
}
@media (max-width: 860px) { .ss-fp-hero-art img { max-height: 240px; } }

/* ---------- GENERIC SECTION ---------- */
.ss-fp-section {
  padding: 4.5rem 0;
}
.ss-fp-section.ss-fp-features { background: var(--fp-bg); }
.ss-fp-section.ss-fp-explorer { background: var(--fp-bg-alt); }
.ss-fp-section.ss-fp-cases    { background: var(--fp-bg); }
.ss-fp-section.ss-fp-cta-strip { background: linear-gradient(135deg, #4a8bc2 0%, #2c5f8f 100%); color: white; }
.ss-fp-h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.ss-fp-section-lead {
  font-size: 1.1rem;
  color: var(--fp-muted);
  margin: 0 0 2.5rem;
  max-width: 38rem;
}
.ss-fp-cta-strip .ss-fp-h2 { color: white; }
.ss-fp-cta-strip .ss-fp-section-lead { color: rgba(255,255,255,0.85); }

/* ---------- FEATURES (3-Spalten) ---------- */
.ss-fp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 860px) { .ss-fp-features-grid { grid-template-columns: 1fr; } }
.ss-fp-feature-card {
  background: white;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 1.75rem;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ss-fp-feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--fp-blue), var(--fp-blue-darker));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.ss-fp-feature-card:hover {
  border-color: var(--fp-blue);
  box-shadow: 0 6px 20px rgba(74, 139, 194, 0.15);
  transform: translateY(-2px);
}
.ss-fp-feature-card:hover::before { transform: scaleX(1); }
.ss-fp-feature-icon {
  font-size: 2.4rem;
  margin-bottom: 0.8rem;
  display: inline-block;
}
.ss-fp-feature-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--fp-fg);
}
.ss-fp-feature-card p {
  font-size: 0.95rem;
  color: var(--fp-muted);
  margin: 0 0 1rem;
  line-height: 1.55;
}
.ss-fp-feature-link {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fp-blue-dark);
  text-decoration: none;
}
.ss-fp-feature-link:hover { color: var(--fp-blue-darker); text-decoration: underline; }

/* ---------- EXPLORER (4 Karten) ---------- */
.ss-fp-explorer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 720px) { .ss-fp-explorer-grid { grid-template-columns: 1fr; } }
.ss-fp-explorer-card {
  display: flex;
  gap: 1.25rem;
  background: white;
  border: 1px solid var(--fp-border);
  border-left: 4px solid var(--fp-blue);
  border-radius: 8px;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--fp-fg);
  transition: all 0.2s ease;
  align-items: center;
}
.ss-fp-explorer-card:hover {
  border-left-color: var(--fp-blue-darker);
  box-shadow: 0 6px 18px rgba(74, 139, 194, 0.15);
  transform: translateX(2px);
}
.ss-fp-explorer-card img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--fp-bg-alt);
  border-radius: 8px;
  padding: 0.5rem;
}
.ss-fp-explorer-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--fp-fg);
}
.ss-fp-explorer-card p {
  font-size: 0.9rem;
  color: var(--fp-muted);
  margin: 0;
  line-height: 1.5;
}

/* ---------- USE CASES (12 Bilder) ---------- */
.ss-fp-cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 860px) { .ss-fp-cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ss-fp-cases-grid { grid-template-columns: 1fr; } }
.ss-fp-case-card {
  background: white;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fp-fg);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}
.ss-fp-case-card:hover {
  border-color: var(--fp-blue);
  box-shadow: 0 6px 18px rgba(74, 139, 194, 0.15);
  transform: translateY(-3px);
}
.ss-fp-case-img {
  background: var(--fp-bg-alt);
  padding: 1rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-fp-case-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ss-fp-case-title {
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  color: var(--fp-fg);
  border-top: 1px solid var(--fp-border);
}

/* ---------- CTA STRIP ---------- */
.ss-fp-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.ss-fp-cta-content { flex: 1 1 24rem; }
.ss-fp-cta-content h2 { margin: 0 0 0.5rem; font-size: 2rem; }
.ss-fp-cta-content p { margin: 0; opacity: 0.92; font-size: 1.05rem; }
.ss-fp-cta-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
@media (max-width: 720px) {
  .ss-fp-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ====================== Frontpage v2 — Hybrid (modern + Brand) ====================== */
/* Already loaded above. Override key things here. */

.ss-fp-hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ss-fp-hero-svg {
  max-width: 100%;
  max-height: 440px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.25));
}
@media (max-width: 860px) { .ss-fp-hero-svg { max-height: 280px; } }

/* Feature Icons (SVG statt Emoji) */
.ss-fp-feature-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 0.9rem;
  display: block;
}
.ss-fp-feature-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Explorer Cards: jetzt mit Emoji-Icon statt Bild */
.ss-fp-explorer-icon {
  font-size: 2.4rem;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fp-blue-light);
  border-radius: 8px;
}

/* Brand-Strip (Ligne Claire, klein, klar als Brand markiert) */
.ss-fp-section.ss-fp-brand {
  background: var(--fp-bg-alt);
  border-top: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
}
.ss-fp-brand-label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fp-blue-dark);
  margin: 0 0 0.5rem;
}
.ss-fp-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 860px) { .ss-fp-brand-grid { grid-template-columns: repeat(2, 1fr); } }
.ss-fp-brand-card {
  background: white;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fp-fg);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}
.ss-fp-brand-card:hover {
  border-color: var(--fp-blue);
  box-shadow: 0 6px 18px rgba(74, 139, 194, 0.15);
  transform: translateY(-2px);
}
.ss-fp-brand-img {
  background: white;
  padding: 1.25rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-fp-brand-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ss-fp-brand-title {
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  color: var(--fp-fg);
  border-top: 1px solid var(--fp-border);
  background: var(--fp-bg-alt);
}

/* ====================== Frontpage: ss-main Override ====================== */
.ss-main:has(.ss-frontpage),
.ss-main:has(.ss-home-v2) {
  max-width: 100%;
  padding: 0;
}

/* Robust fallback — override max-width für alle Frontpage-Wrapper */
/* Hugo wrappt ss-frontpage in ss-main, also globale Überschreibung für Frontpage */

main.ss-main > .ss-frontpage {
  display: block;
}

/* ====================== Modern non-doc pages ====================== */
.ss-modern-page { background: #f7fafc; min-height: 60vh; padding: 0 0 7rem; color: #102a43; }
.ss-modern-shell { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
.ss-modern-article { max-width: 900px; margin: 0 auto; }
.ss-modern-article .ss-breadcrumb { padding-top: 2rem; color: #668096; }
.ss-modern-article-head { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid #cbdde5; }
.ss-modern-eyebrow { margin: 0 0 1.1rem; color: #258c91; font: 700 .72rem ui-monospace, monospace; letter-spacing: .16em; }
.ss-modern-article-head h1 { max-width: 850px; margin: 0; color: #102a43; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1; letter-spacing: -.055em; }
.ss-modern-lead { max-width: 730px; margin: 1.5rem 0 0; color: #526b7f; font-size: 1.25rem; line-height: 1.6; }
.ss-modern-content { padding: 3rem 0; font-size: 1.08rem; }
.ss-modern-content > p:first-child { color: #526b7f; font-size: 1.2rem; }
.ss-modern-content h2 { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid #cbdde5; color: #102a43; font-size: 2rem; letter-spacing: -.035em; }
.ss-modern-content h3 { color: #167b83; font-size: 1.3rem; }
.ss-modern-content strong { color: #167b83; }
.ss-modern-content a { color: #167b83; font-weight: 600; }
.ss-modern-content blockquote { background: #e8f4f3; border-left: 4px solid #75d5c9; color: #23465c; }
.ss-modern-content img:not(.ss-message-anatomy img) { border-radius: 0; border: 1px solid #cbdde5; box-shadow: 0 12px 35px rgba(16,42,67,.1); }
.ss-modern-content table { border-color: #cbdde5; }
.ss-modern-content .ss-glossary-sillysky { float: left; width: 300px; max-width: 300px; height: auto; margin: .2rem 1.6rem 1rem 0; border-radius: 0; box-shadow: 0 8px 24px rgba(16,42,67,.12); }
.ss-modern-content .ss-glossary-sillysky ~ h2 { clear: both; }
@media (max-width: 600px) { .ss-modern-content .ss-glossary-sillysky { float: none; display: block; width: min(300px, 100%); max-width: 100%; margin: 0 auto 1.2rem; } }
@media (max-width: 760px) {
  .ss-modern-shell { padding: 0 1.2rem; }
  .ss-modern-article-head { padding: 2.5rem 0 1.8rem; }
  .ss-modern-content { padding-top: 2rem; }
}
.ss-modern-list-links { border-top: 1px solid #cbdde5; padding: 2.5rem 0 0; }
.ss-modern-list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ss-modern-list-grid a { position: relative; min-height: 150px; display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid #cbdde5; border-top: 3px solid #75d5c9; background: #fff; color: #102a43; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ss-modern-list-grid a:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,42,67,.1); text-decoration: none; }
.ss-modern-list-grid strong { font-size: 1.15rem; color: #102a43; }
.ss-modern-list-grid span { margin-top: .65rem; color: #526b7f; line-height: 1.45; font-size: .92rem; }
.ss-modern-list-grid b { margin-top: auto; align-self: flex-end; color: #167b83; font-size: 1.2rem; }
@media (max-width: 760px) { .ss-modern-list-grid { grid-template-columns: 1fr; } }

/* ====================== Description landing ====================== */
.ss-description-landing { background: #f7fafc; color: #102a43; }
.ss-description-back { padding: .7rem 0; background: #eef5f8; border-bottom: 1px solid #dce8ec; }
.ss-description-back a { color: #526b7f; font-size: .82rem; font-weight: 700; text-decoration: none; }
.ss-description-back a:hover { color: #167b83; text-decoration: none; }
.ss-description-hero { min-height: 540px; position: relative; overflow: hidden; display: flex; align-items: center; background: #081b32; color: #fff; }
.ss-description-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 5rem 2rem; }
.ss-description-hero h1 { max-width: 680px; margin: 0 0 1.3rem; color: #fff; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .98; letter-spacing: -.06em; }
.ss-description-hero-inner > p:not(.ss-home-v2-kicker) { max-width: 600px; margin: 0 0 2rem; color: #c6d8e8; font-size: 1.25rem; line-height: 1.6; }
.ss-description-hero > img { position: absolute; right: -3%; top: 0; width: 58%; height: 100%; object-fit: cover; opacity: .52; }
.ss-description-hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.ss-description-intro { padding: 6rem 0; background: #fff; }
.ss-description-container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
.ss-description-intro h2 { max-width: 800px; margin: 0 0 1.2rem; color: #102a43; font-size: clamp(2.3rem, 4.5vw, 4.5rem); line-height: 1; letter-spacing: -.05em; }
.ss-description-lead { max-width: 720px; margin: 0; color: #526b7f; font-size: 1.25rem; line-height: 1.7; }
.ss-description-explorer { padding: 6rem 0; background: #eef5f8; }
.ss-description-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ss-description-card { min-height: 250px; padding: 1.7rem; display: flex; flex-direction: column; background: #fff; border-top: 4px solid #75d5c9; color: #102a43; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ss-description-card:hover { color: #102a43; text-decoration: none; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,42,67,.12); }
.ss-description-card span { color: #258c91; font: 700 .7rem ui-monospace, monospace; letter-spacing: .15em; }
.ss-description-card h3 { margin: 1.8rem 0 .7rem; color: #102a43; font-size: 1.25rem; line-height: 1.2; }
.ss-description-card p { margin: 0; color: #526b7f; line-height: 1.5; }
.ss-description-card b { margin-top: auto; padding-top: 1.4rem; color: #167b83; font-size: .9rem; }
.ss-description-card i { font-style: normal; margin-left: .35rem; font-size: 1.1rem; }
@media (max-width: 760px) { .ss-description-hero { min-height: 620px; } .ss-description-hero-inner { padding: 4rem 1.2rem; } .ss-description-hero > img { right: -25%; width: 110%; opacity: .3; } .ss-description-container { padding: 0 1.2rem; } .ss-description-grid { grid-template-columns: 1fr; } .ss-description-intro, .ss-description-explorer { padding: 4.5rem 0; } }

/* ====================== Frontpage Header ====================== */
.ss-home-v2 { color: #102a43; background: #f7fafc; overflow: hidden; }
.ss-home-v2-container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
.ss-home-v2-hero { min-height: 720px; position: relative; overflow: hidden; display: flex; align-items: center; background: #081b32; color: #f8fbff; }
.ss-home-v2-mesh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.ss-home-v2-hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 68% 42%, rgba(18,105,150,.25), transparent 35%), linear-gradient(90deg, rgba(8,27,50,.98) 0%, rgba(8,27,50,.76) 45%, rgba(8,27,50,.2) 100%); }
.ss-home-v2-hero-inner { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: 0 auto; padding: 6rem 2rem 7rem; }
.ss-home-v2-kicker, .ss-home-v2-overline { font-size: .75rem; font-weight: 750; letter-spacing: .18em; color: #7dd3c7; margin: 0 0 1.25rem; }
.ss-home-v2-hero h1 { font-size: clamp(3.5rem, 7vw, 6.8rem); line-height: .96; letter-spacing: -.06em; max-width: 800px; margin: 0 0 2rem; font-weight: 750; color: #fff; }
.ss-home-v2-hero h1 span, .ss-home-v2-final h2 span { color: #75d5c9; }
.ss-home-v2-lead { max-width: 600px; font-size: 1.3rem; line-height: 1.55; color: #c6d8e8; margin: 0 0 2.2rem; }
.ss-home-v2-actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.ss-home-v2-btn { display: inline-flex; align-items: center; gap: 1rem; padding: .9rem 1.25rem; border-radius: 3px; font-weight: 700; text-decoration: none; transition: transform .2s, background .2s; }
.ss-home-v2-btn:hover { transform: translateY(-2px); text-decoration: none; }
.ss-home-v2-btn-primary { background: #75d5c9; color: #08233b; }
.ss-home-v2-btn-primary:hover { background: #a3eee5; color: #08233b; }
.ss-home-v2-btn-quiet { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.ss-home-v2-btn-quiet:hover { background: rgba(255,255,255,.1); color: #fff; }
.ss-home-v2-hero-note { margin-top: 4rem; color: #9ab5c8; font-size: .9rem; }
.ss-pulse { display: inline-block; width: 8px; height: 8px; margin-right: .5rem; border-radius: 50%; background: #75d5c9; box-shadow: 0 0 0 5px rgba(117,213,201,.15); }
.ss-home-v2-scroll { position: absolute; z-index: 3; right: 2rem; bottom: 2rem; color: #9ab5c8; font-size: .7rem; letter-spacing: .16em; }
.ss-home-v2-scroll span { color: #75d5c9; font-size: 1.2rem; margin-left: .5rem; }
.ss-home-v2-intro { background: #fff; padding: 7rem 0; }
.ss-home-v2-intro-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 4rem; }
.ss-home-v2-intro h2, .ss-home-v2-section-head h2, .ss-home-v2-paths h2 { font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: -.045em; line-height: 1.05; margin: 0 0 1.5rem; color: #102a43; }
.ss-home-v2-copy { max-width: 680px; font-size: 1.25rem; line-height: 1.7; color: #526b7f; margin: 0; }
.ss-home-v2-capabilities { padding: 7rem 0; background: #eef5f8; }
.ss-home-v2-section-head { margin-bottom: 3rem; }
.ss-home-v2-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #bed2dc; border: 1px solid #bed2dc; }
.ss-home-v2-cap-grid article { background: #eef5f8; padding: 2.3rem; min-height: 310px; display: flex; flex-direction: column; }
.ss-home-v2-index { font: 700 .8rem ui-monospace, monospace; color: #258c91; margin-bottom: 3rem; }
.ss-home-v2-cap-grid h3 { font-size: 1.35rem; margin: 0 0 .8rem; color: #102a43; }
.ss-home-v2-cap-grid p { color: #526b7f; line-height: 1.6; margin: 0 0 1.5rem; }
.ss-home-v2-cap-grid a { margin-top: auto; color: #167b83; font-weight: 700; }
.ss-home-v2-paths { padding: 7rem 0; background: #fff; }
.ss-home-v2-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ss-home-v2-path-grid a { min-height: 220px; padding: 2rem; background: #102a43; color: #fff; display: flex; flex-direction: column; text-decoration: none; border-top: 4px solid #75d5c9; transition: transform .2s, background .2s; }
.ss-home-v2-path-grid a:hover { transform: translateY(-5px); background: #163e5d; text-decoration: none; }
.ss-home-v2-path-grid span { color: #75d5c9; font: 700 .7rem ui-monospace, monospace; letter-spacing: .14em; }
.ss-home-v2-path-grid strong { margin-top: 2.5rem; font-size: 1.4rem; }
.ss-home-v2-path-grid em { margin-top: .7rem; color: #b9cede; font-style: normal; line-height: 1.5; }
.ss-home-v2-final { padding: 8rem 0; background: #081b32; color: #fff; }
.ss-home-v2-final h2 { font-size: clamp(3rem, 6vw, 6rem); line-height: .95; letter-spacing: -.06em; color: #fff; margin: 0 0 2.5rem; }
@media (max-width: 760px) {
  .ss-home-v2-container, .ss-home-v2-hero-inner { padding-left: 1.2rem; padding-right: 1.2rem; }
  .ss-home-v2-hero { min-height: 650px; }
  .ss-home-v2-hero h1 { font-size: 3.7rem; }
  .ss-home-v2-lead { font-size: 1.05rem; }
  .ss-home-v2-scroll { display: none; }
  .ss-home-v2-intro-grid, .ss-home-v2-cap-grid, .ss-home-v2-path-grid { grid-template-columns: 1fr; }
  .ss-home-v2-intro, .ss-home-v2-capabilities, .ss-home-v2-paths { padding: 4.5rem 0; }
  .ss-home-v2-intro-grid { gap: 1.5rem; }
  .ss-home-v2-cap-grid article { min-height: 240px; }
  .ss-home-v2-index { margin-bottom: 1.5rem; }
}
.ss-fp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--fp-border, #d5dde6);
}
.ss-fp-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.ss-fp-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.ss-fp-brand-logo {
  height: 40px;
  width: auto;
  display: block;
}
.ss-fp-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.ss-fp-nav a {
  color: var(--fp-fg, #1a1a1a);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.ss-fp-nav a:hover {
  background: var(--fp-blue-light, #e6f0f9);
  color: var(--fp-blue-dark, #2c5f8f);
}
.ss-fp-nav-cta {
  margin-left: 0.5rem;
  background: var(--fp-blue-dark, #2c5f8f);
  color: white !important;
  font-weight: 600;
}
.ss-fp-nav-cta:hover {
  background: var(--fp-blue-darker, #1a3a5c) !important;
  color: white !important;
}
@media (max-width: 720px) {
  .ss-fp-header-inner { flex-direction: column; gap: 0.5rem; padding: 0.6rem 1rem; }
  .ss-fp-nav { gap: 0.2rem; justify-content: center; }
  .ss-fp-nav a { padding: 0.4rem 0.6rem; font-size: 0.88rem; }
  .ss-fp-brand-logo { height: 32px; }
}

/* ====================== Frontpage v3 — Background Mesh SVG ====================== */
.ss-fp-hero {
  position: relative;
  overflow: hidden;
}
.ss-fp-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.95;
  z-index: 1;
  pointer-events: none;
}
/* Dunkler Verlauf über SVG damit Text lesbar bleibt */
.ss-fp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(74, 139, 194, 0.45) 0%,
    rgba(74, 139, 194, 0.30) 40%,
    rgba(44, 95, 143, 0.35) 70%,
    rgba(44, 95, 143, 0.45) 100%);
  z-index: 2;
  pointer-events: none;
}
/* Content über dem Overlay */
.ss-fp-hero-inner {
  position: relative;
  z-index: 3;
  /* Single column jetzt (kein rechts-Bild mehr) */
  display: block;
  max-width: 900px;
}
.ss-fp-hero-content {
  max-width: 100%;
}

/* ====================== Frontpage Footer ====================== */
.ss-fp-footer {
  background: #1a3a5c;
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
}
.ss-fp-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 720px) { .ss-fp-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; } }
.ss-fp-footer-col h3 {
  color: white;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.9rem;
}
.ss-fp-footer-col p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
}
.ss-fp-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ss-fp-footer-col li {
  margin: 0.3rem 0;
}
.ss-fp-footer-col a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.15s;
}
.ss-fp-footer-col a:hover {
  color: white;
  text-decoration: underline;
}
.ss-fp-footer-bottom {
  max-width: 1280px;
  margin: 2.5rem auto 0;
  padding: 1.2rem 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Message anatomy diagram */
.ss-doc .ss-message-anatomy {
  margin: 2.5rem 0 2.75rem;
  padding: 1rem 1rem 0.85rem;
  border: 1px solid var(--ss-border, #c5d5df);
  border-radius: 1rem;
  background: linear-gradient(145deg, #f8fbfe, #edf5fa);
  box-shadow: 0 0.5rem 1.5rem rgba(32, 76, 108, 0.1);
}
.ss-doc .ss-message-anatomy img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.ss-doc .ss-message-anatomy figcaption {
  margin: 0.8rem auto 0;
  max-width: 58rem;
  color: var(--ss-muted, #52718a);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

/* ====================== Doku-Content v2 — Polished Article ====================== */
.ss-doc main article .ss-content {
  /* Hero-ähnlicher Top-Bereich für den Titel */
}
.ss-doc main article h1 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: var(--ss-fg, #1a1a1a);
  letter-spacing: -0.01em;
}
.ss-doc main article .ss-content > p:first-of-type {
  font-size: 1.15rem;
  color: var(--ss-muted, #5a6470);
  line-height: 1.55;
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ss-border, #d5dde6);
}

/* Bilder im Content: zentriert, mit Caption-Support */
.ss-doc main article .ss-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--ss-border, #d5dde6);
  padding: 0.5rem;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ss-doc main article .ss-content em + img,
.ss-doc main article .ss-content img + em {
  /* Caption direkt unter/über Bild */
}
.ss-doc main article .ss-content p > em:only-child {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ss-muted, #5a6470);
  margin: 0 auto 2rem;
  padding: 0 1rem;
  font-style: italic;
}

/* H2-Sections mit Akzent */
.ss-doc main article .ss-content h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ss-blue, #4a8bc2);
  position: relative;
}
.ss-doc main article .ss-content h2::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--ss-blue-darker, #2c5f8f);
}
.ss-doc main article .ss-content h3 {
  font-size: 1.2rem;
  margin: 1.5rem 0 0.6rem;
  color: var(--ss-blue-dark, #2c5f8f);
}

/* Listen schöner stylen */
.ss-doc main article .ss-content ul,
.ss-doc main article .ss-content ol {
  padding-left: 0;
  list-style: none;
  margin: 1rem 0;
}
.ss-doc main article .ss-content ul li {
  position: relative;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
  line-height: 1.55;
}
.ss-doc main article .ss-content ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--ss-blue, #4a8bc2);
  font-weight: 700;
}
.ss-doc main article .ss-content ol {
  counter-reset: section;
}
.ss-doc main article .ss-content ol li {
  position: relative;
  padding-left: 2rem;
  margin: 0.5rem 0;
  counter-increment: section;
}
.ss-doc main article .ss-content ol li::before {
  content: counter(section);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--ss-blue-light, #e6f0f9);
  color: var(--ss-blue-darker, #2c5f8f);
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.4rem;
}

/* Callout/Blockquote (für "Key idea" etc.) */
.ss-doc main article .ss-content blockquote {
  background: linear-gradient(135deg, #e6f0f9 0%, #d6e6f5 100%);
  border-left: 4px solid var(--ss-blue-dark, #2c5f8f);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ss-fg, #1a1a1a);
}
.ss-doc main article .ss-content blockquote p {
  margin: 0.4rem 0;
}
.ss-doc main article .ss-content blockquote p strong:first-child {
  color: var(--ss-blue-darker, #2c5f8f);
  display: block;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
}

/* Bold-Spam reduzieren — Sub-Bold in normaler Farbe statt schwarz */
.ss-doc main article .ss-content strong {
  color: var(--ss-blue-darker, #2c5f8f);
  font-weight: 600;
}

/* Verbesserte Lead-Lesbarkeit */
.ss-doc main article .ss-content p {
  margin: 0.85rem 0;
  line-height: 1.65;
  color: #2a2a2a;
}

/* Tailwind-Preflight Override für Doku-Content */
.ss-doc main article .ss-content blockquote {
  background: linear-gradient(135deg, #e6f0f9 0%, #d6e6f5 100%) !important;
  border-left: 4px solid var(--ss-blue-dark, #2c5f8f) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--ss-fg, #1a1a1a) !important;
}
.ss-doc main article .ss-content blockquote p {
  margin: 0.4rem 0 !important;
}
.ss-doc main article .ss-content blockquote p strong:first-child {
  color: var(--ss-blue-darker, #2c5f8f) !important;
  display: block !important;
  margin-bottom: 0.3rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.78rem !important;
}

/* ============================================================
   Description-nyssr Landing (Section: /description-of-nyssr-net/)
   Modernes Layout: Hero + Anchor-Sections + 3-Spalten-Grids
   ============================================================ */

.ss-dn-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #4a8bc2 0%, #2c5f8f 100%);
  color: white;
  padding: 5rem 0 4.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ss-dn-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 860px) {
  .ss-dn-hero-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; justify-items: center; }
}
.ss-dn-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-dn-hero-art img {
  width: 280px;
  height: 280px;
  max-width: 100%;
  max-height: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.ss-dn-hero-content { max-width: 720px; }
.ss-dn-hero-content h1 {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem) !important;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem !important;
  text-shadow: none;
  background: none;
  -webkit-text-fill-color: #ffffff;
}
.ss-dn-hero-content p {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  max-width: none;
  margin: 0 !important;
}
.ss-dn-hero-content p strong {
  color: #ffffff;
  font-weight: 700;
}

/* === Section containers === */
.ss-dn-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.ss-dn-section {
  padding: 4rem 0;
}
.ss-dn-section-light { background: #ffffff; color: #1f2937; }
.ss-dn-section-pale  { background: #f1f5f9; color: #1f2937; }
.ss-dn-section-blue  { background: #1e3a8a; color: #f1f5f9; }
.ss-dn-section-blue h2,
.ss-dn-section-blue p { color: #f1f5f9; }
.ss-dn-section h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  padding-bottom: 0.5rem;
  position: relative;
  color: #0f172a;
}
.ss-dn-section h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--ss-blue, #3b82f6);
  border-radius: 2px;
}
.ss-doc main article .ss-content .ss-dn-section-blue h2 {
  color: #f1f5f9 !important;
}
.ss-doc main article .ss-content .ss-dn-section-blue h2::after {
  background: #60a5fa !important;
}
.ss-doc main article .ss-content .ss-dn-section-blue p {
  color: #e2e8f0 !important;
}
.ss-doc main article .ss-content .ss-dn-section-blue p strong {
  color: #93c5fd !important;
}
.ss-landing .ss-content .ss-dn-section-blue h2 {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
.ss-landing .ss-content .ss-dn-section-blue h2::after {
  background: #60a5fa !important;
}
.ss-landing .ss-content .ss-dn-section-blue p {
  color: #e2e8f0 !important;
}
.ss-landing .ss-content .ss-dn-section-blue p strong {
  color: #93c5fd !important;
}
.ss-dn-section p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 1.2rem;
  color: #334155;
}
.ss-dn-section-blue p { color: #cbd5e1; }
.ss-dn-section p strong {
  color: #1e3a8a;
  font-weight: 700;
}
.ss-dn-section-blue p strong {
  color: #93c5fd;
  font-weight: 700;
}
.ss-dn-section p:last-child { margin-bottom: 0; }
.ss-dn-section a[id] { scroll-margin-top: 2rem; }

/* Section mit animierter SVG rechts (Desktop) */
.ss-doc main article .ss-content .ss-dn-section-art .ss-dn-container,
.ss-landing .ss-content .ss-dn-section-art .ss-dn-container {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 2.5rem;
  align-items: start;
}
.ss-doc main article .ss-content .ss-dn-section-art .ss-dn-container > .ss-dn-art-text,
.ss-landing .ss-content .ss-dn-section-art .ss-dn-container > .ss-dn-art-text {
  grid-column: 1;
}
.ss-doc main article .ss-content .ss-dn-section-art .ss-dn-container > .ss-dn-art-text > a[id] + h2,
.ss-landing .ss-content .ss-dn-section-art .ss-dn-container > .ss-dn-art-text > a[id] + h2 {
  margin-top: 0;
}
/* Hugo wrappt Markdown-Bilder in <p>; das <p> mit Bild nach rechts */
.ss-doc main article .ss-content .ss-dn-section-art .ss-dn-container > p:has(img),
.ss-landing .ss-content .ss-dn-section-art .ss-dn-container > p:has(img) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  align-self: start;
  margin-top: 0 !important;
  display: block !important;
  width: 140px !important;
  height: auto;
}
.ss-doc main article .ss-content .ss-dn-section-art .ss-dn-container > p:has(img) img,
.ss-landing .ss-content .ss-dn-section-art .ss-dn-container > p:has(img) img {
  width: 140px !important;
  height: 140px !important;
  max-width: 140px !important;
  max-height: 140px !important;
  display: block !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 860px) {
  .ss-doc main article .ss-content .ss-dn-section-art .ss-dn-container,
  .ss-landing .ss-content .ss-dn-section-art .ss-dn-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .ss-doc main article .ss-content .ss-dn-section-art .ss-dn-container > p:has(img),
  .ss-landing .ss-content .ss-dn-section-art .ss-dn-container > p:has(img) {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 0 auto !important;
    width: 160px !important;
  }
  .ss-doc main article .ss-content .ss-dn-section-art .ss-dn-container > p:has(img) img,
  .ss-landing .ss-content .ss-dn-section-art .ss-dn-container > p:has(img) img {
    width: 160px !important;
    height: 160px !important;
  }
}

.ss-dn-pills {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.1rem 0;
}
.ss-dn-pills p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.ss-dn-pills p strong {
  color: #0f172a;
  font-weight: 700;
  margin-right: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
}
.ss-dn-pills p a,
.ss-dn-pills p a:link,
.ss-dn-pills p a:visited {
  display: inline-block;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e3a8a;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.15s ease;
}
.ss-dn-pills p a:hover {
  background: #1e3a8a;
  color: #ffffff;
  border-color: #1e3a8a;
  transform: translateY(-1px);
}

/* === Footer === */
.ss-dn-footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 2.5rem 0;
  font-size: 0.9rem;
  text-align: center;
}
.ss-dn-footer p { margin: 0; color: #94a3b8; }

/* === Anchor-Target-Styles raus für Landing (kein Doc-v2-Schnickschnack) === */
.ss-landing main.ss-main,
.ss-landing main.ss-main > div.ss-content.ss-landing-content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.ss-landing .ss-content p,
.ss-landing .ss-content li {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: inherit;
}
.ss-landing .ss-content h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem) !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
}
.ss-landing .ss-content h2::before { display: none !important; }
.ss-landing .ss-content h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: #3b82f6;
  border-radius: 2px;
}

/* Grid-Sections: 3-Spalten auf Desktop, gestapelt auf Mobile */
.ss-dn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0 3rem;
}
.ss-doc main article .ss-content .ss-dn-grid > h3 {
  color: #0f172a !important;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: none;
  background: none;
  -webkit-text-fill-color: #0f172a;
  display: block;
}
.ss-doc main article .ss-content .ss-dn-grid > p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: #334155;
}
/* Karten-Layout: jedes (h3 + p)-Paar = eine Spalte in eigener Reihe */
.ss-doc main article .ss-content .ss-dn-grid > h3:nth-of-type(3n+1),
.ss-doc main article .ss-content .ss-dn-grid > p:nth-of-type(3n+1)  { grid-column: 1; }
.ss-doc main article .ss-content .ss-dn-grid > h3:nth-of-type(3n+2),
.ss-doc main article .ss-content .ss-dn-grid > p:nth-of-type(3n+2)  { grid-column: 2; }
.ss-doc main article .ss-content .ss-dn-grid > h3:nth-of-type(3n+3),
.ss-doc main article .ss-content .ss-dn-grid > p:nth-of-type(3n+3)  { grid-column: 3; }
.ss-dn-grid a {
  color: var(--ss-blue-dark, #1e3a8a);
  text-decoration: none;
  font-weight: 600;
}
.ss-dn-grid a:hover {
  text-decoration: underline;
}
/* Card innerhalb Grid: Icon oben + Inhalt */
.ss-dn-card {
  background: #ffffff;
  border: 1px solid var(--ss-border, #e5e7eb);
  border-radius: 10px;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  position: relative;
}
.ss-dn-card:hover {
  border-color: #1e3a8a;
  box-shadow: 0 4px 12px rgba(30,58,138,0.10);
  transform: translateY(-2px);
}
.ss-dn-card img {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 0 1.1rem;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: 64px;
}
.ss-doc main article .ss-content .ss-dn-card > h3 {
  color: #0f172a !important;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  text-shadow: none;
  background: none;
  -webkit-text-fill-color: #0f172a;
  display: block;
}
.ss-doc main article .ss-content .ss-dn-card > p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #475569;
}
.ss-dn-card a {
  color: var(--ss-blue-dark, #1e3a8a);
  text-decoration: none;
  font-weight: 600;
}
.ss-dn-card a:hover {
  text-decoration: underline;
}
@media (max-width: 860px) {
  .ss-dn-grid { grid-template-columns: 1fr; }
  .ss-doc main article .ss-content .ss-dn-grid > h3,
  .ss-doc main article .ss-content .ss-dn-grid > p { grid-column: 1 !important; }
  .ss-dn-hero { padding: 3rem 0 2rem; }
  .ss-dn-card { padding: 1.5rem 1.25rem; }
}

/* Anchor-Section-Headings: etwas Abstand nach oben für Smooth-Scroll */
.ss-content a[id] {
  scroll-margin-top: 2rem;
}

/* H2 in den Description-Sektionen: mehr Whitespace nach oben, cleaner Akzent */
.ss-doc main article .ss-content h2[id$="-what"],
.ss-doc main article .ss-content h2[id$="-why"],
.ss-doc main article .ss-content h2[id="explore-the-platform"],
.ss-doc main article .ss-content h2[id="why-its-different"],
.ss-doc main article .ss-content h2[id="what-nyssrnet-is"] {
  margin-top: 4rem;
  padding-bottom: 0.8rem;
  font-size: 1.5rem;
}