/* ============================================================
   Syrcon — Seiten-Layout (Header, Hero, Feature-Icons, Footer …)
   Für Homepage + Unterseiten. Benötigt syrcon-tokens.css + syrcon-ui.css.
   ============================================================ */

/* Sticky-Header mit Blur */
header.site { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--syr-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--syr-border); }
.site-nav-links { display:flex; gap:var(--syr-space-3, .75rem); align-items:center; }
.site-nav-links a:not(.syr-btn) { color: var(--syr-text); text-decoration:none; font-weight: var(--syr-fw-medium);
  font-size: .9375rem; white-space: nowrap; padding: 6px 12px; border: 1.5px solid transparent;
  border-radius: var(--syr-radius-sm); transition: color var(--syr-dur), border-color var(--syr-dur); }
.site-nav-links a:not(.syr-btn):hover { color: var(--syr-accent-text); }
/* Aktive Seite: dunkelblauer Rahmen */
.site-nav-links a:not(.syr-btn).active { color: var(--syr-accent); border-color: var(--syr-accent); }
/* Logo-Groessen: hier statt inline im Markup, damit sie auf schmalen Schirmen
   ueberhaupt anpassbar sind (Inline-Styles lassen sich nicht ueberschreiben). */
header.site .syr-logo img { height: 44px; }
footer .syr-logo img { height: 40px; }
/* Zwischen 1040 und 1200 px wird es mit sechs Punkten + Button eng -> noch enger. */
@media (max-width: 1200px){
  .site-nav-links { gap: 0; }
  .site-nav-links a:not(.syr-btn) { padding: 5px 8px; font-size: .875rem; }
}
@media (max-width: 1075px){ .site-nav-links a:not(.syr-btn){ display:none; } }
/* Handy: Wortmarke und "Beratung anfragen" passen sonst nicht nebeneinander und
   die ganze Seite bekaeme einen waagerechten Scrollbalken. Beides wird kompakter. */
@media (max-width: 700px){
  header.site .syr-container { padding-inline: var(--syr-space-4); }
  header.site .syr-logo img { height: 34px; }
  .site-nav-links { gap: var(--syr-space-3); }
  .site-nav-links .syr-btn.sm { padding: 8px 14px; font-size: .8125rem; }
}
@media (max-width: 380px){
  header.site .syr-logo img { height: 26px; }
  .site-nav-links .syr-btn.sm { padding: 8px 12px; }
}

/* Sprungziele (z.B. #loesungen) nicht unter den klebenden Kopf scrollen lassen. */
.syr-section[id] { scroll-margin-top: 92px; }
@media (max-width: 700px){ .syr-section[id] { scroll-margin-top: 72px; } }

/* Hero */
.hero { background: var(--syr-hero-gradient); overflow: hidden; }
.hero-grid { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: var(--syr-space-16); align-items:center; }
@media (max-width: 960px){ .hero-grid { grid-template-columns:minmax(0,1fr); gap:var(--syr-space-12); } }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.hero-cta { display:flex; gap:var(--syr-space-4); flex-wrap:wrap; margin-top: var(--syr-space-8); }

/* Foto-Hero: Hintergrundbild + Blau-Overlay, weisse Schrift.
   Bild inline setzen, z.B.:
   style="background:linear-gradient(100deg,rgba(9,20,52,.93),rgba(17,48,110,.30)),
          url('/wp-content/uploads/.../bild.jpg') center/cover;" */
/* Foto-Heros einheitlich: gleiche Hoehe und gleicher Innenabstand auf
   allen Seiten, Inhalt vertikal zentriert. Die Seiten setzen im
   style-Attribut nur noch das Hintergrundbild. */
.hero.photo { color:#fff; background-color: var(--syr-blue-900); background-size:cover; background-position:center;
  min-height: 520px; padding-block: var(--syr-space-16) var(--syr-space-12); display:flex; align-items:center; }
.hero.photo > .syr-container { width: 100%; }
@media (max-width: 700px){ .hero.photo { min-height: 440px; } }
.hero.photo .syr-eyebrow { color: var(--syr-blue-200); }
.hero.photo .syr-h1, .hero.photo h1 { color:#fff; }
.hero.photo .syr-lead, .hero.photo p { color: rgba(255,255,255,.88); }
.hero.photo .syr-dot { color: var(--syr-blue-200); }
.hero.photo .syr-btn-outline { color:#fff; border-color: rgba(255,255,255,.55); background:transparent; }
.hero.photo .syr-btn-outline:hover { border-color:#fff; background: rgba(255,255,255,.14); color:#fff; }
.hero.photo .syr-link { color: var(--syr-blue-200); }
.hero.photo .syr-muted { color: rgba(255,255,255,.72); }

/* Hero-Visual: Daten-Raster (Anlehnung an die Bildmarke) */
.datagrid { position:relative; aspect-ratio: 1/1; max-width: 460px; margin-inline:auto; width:100%;
  display:grid; grid-template-columns: repeat(6,1fr); grid-template-rows: repeat(6,1fr); gap: 10px; padding: 22px;
  background: var(--syr-surface); border:1px solid var(--syr-border); border-radius: var(--syr-radius-lg); box-shadow: var(--syr-shadow-lg); }
.datagrid span { border-radius: 6px; background: var(--syr-blue-050); }
.datagrid span.a { background: var(--syr-blue-200); }
.datagrid span.b { background: var(--syr-blue-300); }
.datagrid span.c { background: var(--syr-blue-700); }
.datagrid span.d { background: var(--syr-blue-900); }
.float-card { position:absolute; right:-14px; bottom:-14px; background: var(--syr-surface); border:1px solid var(--syr-border);
  border-radius: var(--syr-radius); box-shadow: var(--syr-shadow-lg); padding: 14px 18px; display:flex; gap:12px; align-items:center; }
.float-card b { font-family:var(--syr-font-head); font-size:1.5rem; color:var(--syr-accent); line-height:1; }
.float-card small { color:var(--syr-text-muted); font-size:.8rem; }

/* Stat-Karten */
.stats { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:var(--syr-space-4); }
@media (max-width: 760px){ .stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.stat { background: var(--syr-surface); border:1px solid var(--syr-border); border-radius: var(--syr-radius);
  padding: var(--syr-space-6); border-top: 3px solid var(--syr-blue-700); }
.stat b { display:block; font-family:var(--syr-font-head); font-weight:var(--syr-fw-extra); font-size: 2.75rem; color:var(--syr-accent); line-height:1; letter-spacing:var(--syr-tracking-tight); margin-bottom: var(--syr-space-2); }
.stat span { color: var(--syr-text-muted); font-size:.9rem; line-height:1.4; }

/* Feature-Icons (Verlaufs-Kachel + weißes SVG) */
.feat-icon { width:56px; height:56px; border-radius: 14px; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--syr-blue-700), var(--syr-blue-900)); color:#fff; box-shadow: var(--syr-shadow); flex:0 0 auto; }
.feat-icon svg { width:28px; height:28px; }
/* Feature-Cards mit Akzent-Oberkante */
.feat-cards .syr-card { border-top: 3px solid var(--syr-blue-200); }
.feat-cards .syr-card .feat-icon { margin-bottom: var(--syr-space-5); }

/* Startseite: Lösungs-Kacheln komplett klickbar (Stretched-Link). Der
   ::after der .syr-link ist der Pfeil -> für die Flaeche ::before nehmen. */
#loesungen .feat-cards .syr-card { position: relative; cursor: pointer; }
#loesungen .feat-cards .syr-card .syr-link::before { content: ""; position: absolute;
  inset: 0; z-index: 1; }
/* Icon + Überschrift nebeneinander (statt untereinander) */
.feat-head { display:flex; align-items:center; gap: var(--syr-space-4); margin-bottom: var(--syr-space-4); }
.feat-head .feat-icon { margin-bottom: 0; }
.feat-head h3 { margin: 0; }

/* Split-Feature (Text + Visual nebeneinander, alternierend) */
.split { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--syr-space-16); align-items:center; }
.split + .split { margin-top: var(--syr-space-16); }
.split.rev .split-media { order: -1; }
@media (max-width: 900px){ .split { grid-template-columns:minmax(0,1fr); gap:var(--syr-space-8); } .split.rev .split-media { order: 0; } }
.split-media { background: var(--syr-surface); border:1px solid var(--syr-border); border-radius: var(--syr-radius-lg);
  box-shadow: var(--syr-shadow); padding: var(--syr-space-8); min-height: 240px; display:flex; align-items:center; justify-content:center; }
.syr-section.dark .split-media { background: #1B3D82; border-color: rgba(255,255,255,.14); }

/* Barrieren-Stapel (rechte Spalte "Status in Deutschland") */
.barrier-stack { display: grid; gap: var(--syr-space-4); align-content: start; align-self: start; }
.barrier-stack > .syr-eyebrow { display: block; margin-bottom: var(--syr-space-1); }
.barrier { padding: var(--syr-space-6); border-left: 3px solid var(--syr-blue-200); }
.barrier .feat-head { margin-bottom: var(--syr-space-3); }
.barrier .feat-icon { width: 44px; height: 44px; border-radius: 12px; }
.barrier .feat-icon svg { width: 22px; height: 22px; }
.barrier p { margin: 0; color: var(--syr-text-soft); font-size: .98rem; line-height: 1.55; }

/* O-Ton / Kundenstimme */
.oton { max-width: 780px; margin: var(--syr-space-2) auto var(--syr-space-16); text-align: center; }
.oton .mark { display:block; font-family: var(--syr-font-head); font-weight: var(--syr-fw-extra); font-size: 3.4rem; color: var(--syr-blue-200); line-height: .5; margin-bottom: var(--syr-space-5); }
.oton blockquote { margin: 0; font-family: var(--syr-font-head); font-weight: var(--syr-fw-semibold); font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.3; letter-spacing: var(--syr-tracking-tight); color: var(--syr-text); }
.ref-heading { text-align:center; color: var(--syr-text-muted); font-size: .8125rem; text-transform: uppercase; letter-spacing: var(--syr-tracking-eyebrow); margin: 0 0 var(--syr-space-8); }

/* Kundenlogos */
.logo-strip { display:grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap:var(--syr-space-6); align-items:center; }
@media (max-width: 860px){ .logo-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap:var(--syr-space-6); } }
/* Zentrierte Variante (z.B. 5 Logos je Produkt, oder 2x5 Kommunen): mittig,
   max. 5 pro Reihe (max-width fasst genau 5 Zellen + 4 Abstände). */
.logo-strip.center { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--syr-space-6);
  max-width: calc(168px * 5 + var(--syr-space-6) * 4); margin-inline:auto; }
.logo-strip.center .logo-cell { flex: 0 0 168px; }
@media (max-width: 860px){ .logo-strip.center .logo-cell { flex-basis: 140px; } }
.logo-cell { background: var(--syr-surface); border:1px solid var(--syr-border); border-radius: var(--syr-radius-sm);
  height: 118px; display:flex; align-items:center; justify-content:center; padding: var(--syr-space-3) var(--syr-space-4); }
.logo-cell img { max-height: 78px; max-width:92%; display:block;
  filter: grayscale(1); opacity:.8; transition: filter var(--syr-dur), opacity var(--syr-dur); }
.logo-cell:hover img { filter: grayscale(0); opacity:1; }

/* Schnittstellen-Partner in Referenz-Optik (Wortmarken statt Bilddateien) */
.if-logos { align-self: start; }
.if-logos > .syr-eyebrow { display: block; margin-bottom: var(--syr-space-4); }
.if-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--syr-space-4); }
.if-grid .logo-cell { height: 96px; }
.if-grid .logo-cell img { max-height: 46px; max-width: 84%; }
.if-grid .logo-cell.more { border-style: dashed; }

/* Zusatzmodule-Karten (Akzent-Oberkante, etwas anderer Ton als feat-cards) */
.module-grid .module-card { border-top: 3px solid var(--syr-blue-300); }
.module-card .feat-head { margin-bottom: var(--syr-space-3); }
.if-grid .logo-cell.more span { font-size: .9rem; color: var(--syr-text-muted); text-align: center; }

/* Artikel-Typografie (Blog) */
.prose { max-width: 760px; font-size: 1.0625rem; color: var(--syr-text); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-family: var(--syr-font-head); font-weight: var(--syr-fw-bold); font-size: 1.65rem; line-height:1.2; letter-spacing: var(--syr-tracking-tight); margin: 1.8em 0 .5em; }
.prose h3 { font-family: var(--syr-font-head); font-weight: var(--syr-fw-semibold); font-size: 1.3rem; margin: 1.6em 0 .4em; }
.prose h4 { font-family: var(--syr-font-head); font-weight: var(--syr-fw-semibold); font-size: 1.1rem; margin: 1.4em 0 .4em; }
.prose p { margin: 0 0 1.15em; line-height: 1.78; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; line-height: 1.7; }
.prose ul li::marker { color: var(--syr-accent); }
.prose a { color: var(--syr-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration: none; }
.prose strong, .prose b { color: var(--syr-text); font-weight: var(--syr-fw-bold); }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--syr-radius); margin: 1.6em auto; box-shadow: var(--syr-shadow-sm); }
.prose blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--syr-blue-200); color: var(--syr-text-soft); font-style: italic; }
.prose hr { border:0; border-top:1px solid var(--syr-border); margin: 2em 0; }
.prose table { width:100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95em; }
.prose th, .prose td { border:1px solid var(--syr-border); padding: 8px 12px; text-align:left; }

/* Footer */
.foot-grid { display:grid; grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:var(--syr-space-8); }
@media (max-width: 760px){ .foot-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
/* Handy: zwei Spalten sind fuer die Linklisten zu schmal -> untereinander. */
@media (max-width: 560px){ .foot-grid { grid-template-columns: minmax(0,1fr); } }
.foot-grid h4 { font-family:var(--syr-font-head); font-size:.8125rem; letter-spacing:var(--syr-tracking-eyebrow); text-transform:uppercase; color: var(--syr-blue-200); margin:0 0 var(--syr-space-4); }
.foot-grid a { display:block; color: rgba(255,255,255,.78); text-decoration:none; padding:4px 0; }
.foot-grid a:hover { color:#fff; }

/* Häufige Fragen: Klapp-Elemente ohne JavaScript (<details>/<summary>).
   Ohne CSS klappt es trotzdem — der Browser kann das von Haus aus. */
.faq { max-width: 820px; display: flex; flex-direction: column; gap: var(--syr-space-4); }
.faq details { border: 1px solid var(--syr-border); border-radius: var(--syr-radius); background: var(--syr-surface); }
.faq details[open] { border-color: var(--syr-blue-200); }
.faq details[open] summary { color: var(--syr-accent-text); }
.faq summary { display: flex; align-items: flex-start; gap: var(--syr-space-4); cursor: pointer;
  list-style: none; padding: var(--syr-space-5) var(--syr-space-7); font-family: var(--syr-font-head);
  font-weight: var(--syr-fw-semibold); font-size: 1.0625rem; line-height: 1.45; color: var(--syr-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; flex: 0 0 auto; margin-top: .4em; width: 0; height: 0;
  border-style: solid; border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--syr-accent);
  transition: transform var(--syr-dur) var(--syr-ease); }
.faq details[open] summary::before { transform: rotate(90deg); border-left-color: var(--syr-accent-text); }
.faq summary:hover { color: var(--syr-accent-text); }
.faq summary:focus-visible { outline: 2px solid var(--syr-accent); outline-offset: 2px; }
.faq .answer { padding: 0 var(--syr-space-7) var(--syr-space-6) calc(var(--syr-space-7) + var(--syr-space-4));
  color: var(--syr-text-muted); line-height: 1.65; max-width: 72ch; }
.faq .answer p { margin: 0 0 var(--syr-space-3); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Ablauf in Schritten: nummerierte Karten mit Verbindungslinie */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--syr-space-6); }
@media (max-width: 980px){ .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .steps { grid-template-columns: minmax(0, 1fr); } }
.steps .step { position: relative; padding-top: var(--syr-space-6); border-top: 3px solid var(--syr-blue-200); }
.steps .step b { display: block; font-family: var(--syr-font-head); font-size: .8125rem;
  letter-spacing: var(--syr-tracking-eyebrow); text-transform: uppercase; color: var(--syr-accent);
  margin-bottom: var(--syr-space-3); }
.steps .step h3 { margin: 0 0 var(--syr-space-3); }
.steps .step p { margin: 0; color: var(--syr-text-muted); font-size: .9375rem; line-height: 1.6; }

/* ============================================================
   KREISLAUF – interaktives Ablauf-Diagramm
   (Abschnitt "So funktioniert es" auf /bildungskarte/)
   Sechs Stationen auf einem Ring, aktive Station im Detail-Panel.
   Ohne JS bleiben Ring, Panel (Station 1) und die Pill-Leiste
   sichtbar; die Vollversion der Texte liegt zusaetzlich im <noscript>.
   ============================================================ */
.syr-kr { display: grid; grid-template-columns: minmax(0,24rem) minmax(0,21rem);
  justify-content: center; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px){ .syr-kr { grid-template-columns: minmax(0,24rem); } }

.syr-kr-ring { position: relative; width: min(100%, 22rem); margin-inline: auto; aspect-ratio: 1; }
.syr-kr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.syr-kr-track { fill: none; stroke: var(--syr-border); stroke-width: 1.4; }
.syr-kr-progress { fill: none; stroke: var(--syr-accent); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 251.327; stroke-dashoffset: 251.327;
  transform: rotate(-90deg); transform-origin: 50px 50px;
  transition: stroke-dashoffset .6s var(--syr-ease); }
[data-theme="dark"] .syr-kr-progress { stroke: var(--syr-blue-200); }
.syr-kr-chevron { fill: var(--syr-blue-200); opacity: .6; }
.syr-kr-hub-ring { fill: var(--syr-surface); stroke: var(--syr-border); stroke-width: 1.2; }
.syr-kr-hub-dot { fill: var(--syr-accent); }
[data-theme="dark"] .syr-kr-hub-dot { fill: var(--syr-blue-200); }
.syr-kr-rotor { transform-origin: 50px 50px; animation: syr-kr-spin 9s linear infinite; }
.syr-kr-pulse { fill: var(--syr-blue-300); }
@keyframes syr-kr-spin { to { transform: rotate(360deg); } }

.syr-kr-node { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y));
  transform: translate(-50%,-50%); width: clamp(2.7rem, 3rem + 1.5vw, 3.5rem); aspect-ratio: 1;
  border-radius: 50%; border: 1.5px solid var(--syr-blue-200); background: var(--syr-surface);
  color: var(--syr-accent); font-family: var(--syr-font-head); font-weight: 700; font-size: 1.15rem;
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--syr-dur), color var(--syr-dur), border-color var(--syr-dur),
    transform var(--syr-dur), box-shadow var(--syr-dur); }
[data-theme="dark"] .syr-kr-node { color: var(--syr-text); }
.syr-kr-node:hover { border-color: var(--syr-accent); transform: translate(-50%,-50%) scale(1.06); }
.syr-kr-node:focus-visible { outline: 3px solid var(--syr-accent); outline-offset: 3px; }
.syr-kr-node[aria-current="step"] { background: var(--syr-accent); color: #fff; border-color: var(--syr-accent);
  transform: translate(-50%,-50%) scale(1.12); box-shadow: 0 0 0 6px var(--syr-accent-tint); }
[data-theme="dark"] .syr-kr-node[aria-current="step"] { background: var(--syr-blue-200);
  color: var(--syr-blue-900); border-color: var(--syr-blue-200); }

.syr-kr-panel { background: var(--syr-surface); border: 1px solid var(--syr-border);
  border-radius: var(--syr-radius-lg); padding: var(--syr-space-6); box-shadow: var(--syr-shadow); }
.syr-kr-top { display: flex; align-items: center; justify-content: space-between;
  gap: var(--syr-space-3); margin-bottom: var(--syr-space-4); }
.syr-kr-count { font-family: var(--syr-font-head); color: var(--syr-text-muted); font-variant-numeric: tabular-nums; }
.syr-kr-count b { color: var(--syr-text); }
.syr-kr-role { font-family: var(--syr-font-head); font-weight: 600; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--syr-accent-text); background: var(--syr-accent-tint);
  padding: .3rem .6rem; border-radius: 999px; }
.syr-kr-panel h3 { font-family: var(--syr-font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.2;
  margin: 0 0 var(--syr-space-2); }
.syr-kr-panel p { margin: 0; color: var(--syr-text-soft); font-size: .97rem; }
.syr-kr-swap { animation: syr-kr-fade .35s var(--syr-ease) both; }
@keyframes syr-kr-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.syr-kr-nav { display: flex; gap: var(--syr-space-2); margin-top: var(--syr-space-6); }
.syr-kr-nav button { font-family: var(--syr-font-head); font-weight: 600; font-size: .9rem;
  border: 1px solid var(--syr-border); background: transparent; color: var(--syr-text);
  border-radius: var(--syr-radius-sm); padding: .5rem .7rem; cursor: pointer;
  transition: background var(--syr-dur), border-color var(--syr-dur); }
.syr-kr-nav button:hover { border-color: var(--syr-accent); background: var(--syr-accent-tint); }
.syr-kr-nav button:focus-visible { outline: 3px solid var(--syr-accent); outline-offset: 2px; }
.syr-kr-nav .syr-kr-play { flex: 1; }

.syr-kr-pills { list-style: none; margin: var(--syr-space-8) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--syr-space-2); }
.syr-kr-pills button { font-family: var(--syr-font-head); font-weight: 600; font-size: .8rem;
  border: 1px solid var(--syr-border); background: var(--syr-surface); color: var(--syr-text-muted);
  border-radius: 999px; padding: .4rem .8rem; cursor: pointer;
  transition: color var(--syr-dur), border-color var(--syr-dur), background var(--syr-dur); }
.syr-kr-pills button:hover { color: var(--syr-text); border-color: var(--syr-blue-200); }
.syr-kr-pills button:focus-visible { outline: 3px solid var(--syr-accent); outline-offset: 2px; }
.syr-kr-pills button[aria-current="step"] { color: #fff; background: var(--syr-accent); border-color: var(--syr-accent); }
[data-theme="dark"] .syr-kr-pills button[aria-current="step"] { color: var(--syr-blue-900);
  background: var(--syr-blue-200); border-color: var(--syr-blue-200); }
.syr-kr-pills button.is-done { color: var(--syr-text); }

@media (prefers-reduced-motion: reduce) {
  .syr-kr-rotor { animation: none; }
  .syr-kr-pulse { display: none; }
  .syr-kr-progress, .syr-kr-node { transition: none; }
  .syr-kr-swap { animation: none; }
}

/* Kreislauf auf dunklem Grund (Abschnitt "Big Data, Small Data – Smart
   Data" auf /data-analytics/): die Sektion selbst ist bereits dunkel,
   darum hier die gleichen Anpassungen wie bei [data-theme="dark"] oben –
   nur auf .syr-section.dark statt auf das Seiten-Farbschema bezogen. */
.syr-section.dark .syr-kr-progress { stroke: var(--syr-blue-200); }
.syr-section.dark .syr-kr-hub-dot { fill: var(--syr-blue-200); }
.syr-section.dark .syr-kr-node { color: var(--syr-text); }
.syr-section.dark .syr-kr-node:hover { border-color: var(--syr-blue-200); }
.syr-section.dark .syr-kr-node:focus-visible { outline-color: var(--syr-blue-200); }
.syr-section.dark .syr-kr-node[aria-current="step"] { background: var(--syr-blue-200);
  color: var(--syr-blue-900); border-color: var(--syr-blue-200); box-shadow: 0 0 0 6px rgba(166,196,232,.25); }
.syr-section.dark .syr-kr-nav button:hover { border-color: var(--syr-blue-200); background: rgba(166,196,232,.14); }
.syr-section.dark .syr-kr-pills button[aria-current="step"] { color: var(--syr-blue-900);
  background: var(--syr-blue-200); border-color: var(--syr-blue-200); }

/* ============================================================
   ROLLEN – drei Systemrollen als Spalten, Detail per <details>
   (Abschnitt "Rollenbasiert" auf /bildungskarte/, dunkle Sektion).
   Tokens loesen innerhalb .syr-section.dark bereits ins Dunkle auf.
   ============================================================ */
.syr-roles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--syr-space-6); margin-top: var(--syr-space-12); }
@media (max-width: 820px){ .syr-roles { grid-template-columns: minmax(0,1fr); } }

.syr-role { display: flex; flex-direction: column;
  background: var(--syr-surface); border: 1px solid var(--syr-border);
  border-radius: var(--syr-radius-lg); padding: var(--syr-space-6); }
.syr-role-head { display: flex; align-items: flex-start; gap: var(--syr-space-3);
  margin-bottom: var(--syr-space-4); }
.syr-role-head h3 { margin: 0; }
.syr-role-sub { display: block; font-family: var(--syr-font); font-size: .8125rem;
  font-weight: 400; color: var(--syr-text-muted); margin-top: 2px; }
.syr-role > p { margin: 0; color: var(--syr-text-soft); font-size: 1rem; flex: 1 1 auto; }

.syr-role-more { margin-top: var(--syr-space-5); border-top: 1px solid var(--syr-border); }
.syr-role-more summary { display: flex; align-items: center; gap: var(--syr-space-2);
  padding-top: var(--syr-space-4); cursor: pointer; list-style: none;
  font-family: var(--syr-font-head); font-weight: 600; font-size: .9rem; color: var(--syr-text); }
.syr-role-more summary::-webkit-details-marker { display: none; }
.syr-role-more summary::after { content: "+"; margin-left: auto; font-size: 1.35rem;
  line-height: 1; color: var(--syr-blue-200); }
.syr-role-more[open] summary::after { content: "–"; }
.syr-role-more summary:hover { color: var(--syr-accent-text); }
.syr-role-more summary:focus-visible { outline: 2px solid var(--syr-blue-200); outline-offset: 4px; }
.syr-role-more ul { list-style: none; padding: 0; margin: var(--syr-space-3) 0 var(--syr-space-1); }
.syr-role-more li { position: relative; padding-left: 1.25em; margin-bottom: var(--syr-space-2);
  color: var(--syr-text-soft); font-size: .9375rem; line-height: 1.5; }
.syr-role-more li::before { content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--syr-blue-200); }

/* Rollen: kurze Sichtbarkeits-Zeile ("Sieht" / "Sieht nicht") */
.syr-role-sees { margin: var(--syr-space-4) 0 0; display: grid; gap: var(--syr-space-2); }
.syr-role-sees > div { display: grid; grid-template-columns: auto 1fr;
  gap: var(--syr-space-3); align-items: baseline; }
.syr-role-sees dt { margin: 0; font-family: var(--syr-font-head); font-weight: 600;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.syr-role-sees dd { margin: 0; font-size: .875rem; color: var(--syr-text-soft); line-height: 1.45; }
.syr-role-sees .yes dt { color: #5FD09A; }
.syr-role-sees .yes dt::before { content: "\2713\00a0"; }
.syr-role-sees .no dt { color: var(--syr-text-muted); }
.syr-role-sees .no dt::before { content: "\2715\00a0"; }

/* ============================================================
   CITYCARD-SCHAUBILD – Nabe-und-Speiche-Grafik im Abschnitt
   "Was ist eine CityCard?". Reines Inline-SVG, alle Beschriftungen
   liegen mit Rand innerhalb der viewBox (nichts wird abgeschnitten)
   und tragen einen Kontur-Halo in Flaechenfarbe, damit sie ueber
   Verbindungslinien und Skyline lesbar bleiben.
   ============================================================ */
.cc-hub { width: 100%; }
.cc-hub svg { width: 100%; height: auto; display: block; overflow: visible; }
.cc-hub .cc-line { stroke: var(--syr-blue-300); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.cc-hub .cc-node { fill: var(--syr-blue-900); }
.cc-hub .cc-ico { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-hub .cc-node-p { fill: #fff; font-family: var(--syr-font-head); font-weight: 700; }
.cc-hub .cc-card { fill: var(--syr-blue-900); }
.cc-hub .cc-card-qr { fill: rgba(255,255,255,.55); }
.cc-hub .cc-card-text { fill: #fff; font-family: var(--syr-font-head); font-weight: 700; }
.cc-hub .cc-card-sub { fill: rgba(255,255,255,.72); font-family: var(--syr-font-head); letter-spacing: .14em; }
.cc-hub .cc-skyline { fill: var(--syr-blue-200); opacity: .4; }
.cc-hub .cc-label { fill: var(--syr-text); font-family: var(--syr-font); font-size: 13px; font-weight: 600;
  text-anchor: middle; paint-order: stroke; stroke: var(--syr-surface); stroke-width: 4px; stroke-linejoin: round; }
.cc-hub figcaption { margin-top: var(--syr-space-4); color: var(--syr-text-muted); font-size: .9rem; line-height: 1.55; }

[data-theme="dark"] .cc-hub .cc-node,
[data-theme="dark"] .cc-hub .cc-card { fill: var(--syr-blue-300); }
[data-theme="dark"] .cc-hub .cc-ico { stroke: var(--syr-blue-900); }
[data-theme="dark"] .cc-hub .cc-node-p,
[data-theme="dark"] .cc-hub .cc-card-text { fill: var(--syr-blue-900); }
[data-theme="dark"] .cc-hub .cc-card-sub { fill: rgba(17,48,110,.72); }

/* ============================================================
   CITYCARD – Netto-Vergleich (Abschnitt "Fuer lokale Arbeitgeber")
   Gestapeltes Balkenpaar: gleicher Arbeitgeber-Aufwand, unterschiedlich
   viel Netto. Reines Inline-SVG; Beschriftungen mit Kontur-Halo, alles
   innerhalb der viewBox. Hell/Dunkel ueber Tokens.
   ============================================================ */
.cc-bars { width: 100%; margin: 0; }
.cc-bars svg { width: 100%; height: auto; display: block; overflow: visible; }
.cc-bars-title { font-family: var(--syr-font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--syr-text); margin: 0 0 var(--syr-space-4); }
.cc-bars .cb-base   { stroke: var(--syr-border); stroke-width: 1.5; }
.cc-bars .cb-ded    { fill: var(--syr-blue-200); }
.cc-bars .cb-net-a  { fill: var(--syr-blue-900); }
.cc-bars .cb-lic    { fill: var(--syr-text-muted); }
.cc-bars .cb-net-b  { fill: var(--syr-success); }
.cc-bars .cb-inpct  { fill: #fff; font-family: var(--syr-font-head); font-weight: 800; text-anchor: middle; }
.cc-bars .cb-val    { fill: var(--syr-text); font-family: var(--syr-font-head); font-weight: 800; font-size: 20px; text-anchor: middle; }
.cc-bars .cb-cap    { fill: var(--syr-text-muted); font-family: var(--syr-font); font-size: 11px; text-anchor: middle; }
.cc-bars .cb-lead   { stroke: var(--syr-text-muted); stroke-width: 1; fill: none; }
.cc-bars .cb-ann    { fill: var(--syr-text-soft); font-family: var(--syr-font); font-size: 10.5px;
  paint-order: stroke; stroke: var(--syr-surface); stroke-width: 3px; stroke-linejoin: round; }
.cc-bars figcaption { margin-top: var(--syr-space-4); color: var(--syr-text-muted); font-size: .82rem; line-height: 1.5; }

[data-theme="dark"] .cc-bars .cb-net-a { fill: var(--syr-blue-300); }
[data-theme="dark"] .cc-bars .cb-net-b { fill: #5FD09A; }
[data-theme="dark"] .cc-bars .cb-inpct { fill: var(--syr-blue-900); }

/* ============================================================
   CITYCARD – Kunden-App-Prototyp (Abschnitt "Die Kunden-App")
   Vier Screens per Antippen, untere Tab-Leiste. Reines Vanilla-JS
   (design-kit/syrcon-app.js). Das Telefon-Innere ist bewusst immer
   hell (eine App-Ansicht) und hat dafuer eigene --a-*-Variablen;
   Rahmen, Randspalten, Ueberschriften und Badge folgen den Tokens.
   ============================================================ */
/* Text-Spalte (Eyebrow, H2, Lead, Vorteilsliste) links, Telefon rechts –
   beide Spalten starten oben auf gleicher Hoehe, kein Leerraum ueberm Telefon. */
.cc-app { display: grid; grid-template-columns: minmax(0, 30rem) auto;
  gap: clamp(2rem, 6vw, 4rem); align-items: start; justify-content: space-between; }
.cc-app-copy { display: flex; flex-direction: column; }
.cc-app-copy .syr-lead { max-width: 42ch; margin-top: var(--syr-space-3); }
.cc-app-copy .cc-pts { margin-top: var(--syr-space-8); }
.cc-app-visual { display: flex; flex-direction: column; align-items: center;
  gap: var(--syr-space-5); padding-right: 12px; }
.cc-app-note { max-width: 21rem; margin: 0; text-align: center;
  font-size: .82rem; line-height: 1.5; color: var(--syr-text-muted); }
@media (max-width: 820px) {
  .cc-app { grid-template-columns: minmax(0, 22rem); justify-content: center; }
  .cc-app-visual { padding-right: 0; }
}

.cc-ph-holder { position: relative; justify-self: center; }
.cc-ph-badge { position: absolute; top: -14px; right: -20px; z-index: 5;
  background: var(--syr-success); color: #fff; font-family: var(--syr-font-head);
  font-weight: 700; font-size: .72rem; padding: .5rem .8rem; border-radius: 999px;
  transform: rotate(6deg); box-shadow: 0 12px 22px -10px rgba(16,35,76,.55); white-space: nowrap; }
.cc-ph-badge span { display: block; font-weight: 500; font-size: .62rem; opacity: .9; }

.cc-ph { width: 280px; aspect-ratio: 296 / 604; background: #0A1730; border-radius: 44px;
  padding: 12px; box-shadow: var(--syr-shadow-lg); position: relative; }
.cc-ph::before { content: ""; position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 24px; background: #0A1730; border-radius: 999px; z-index: 4; }
.cc-scr { position: absolute; inset: 12px; border-radius: 33px; overflow: hidden; background: #fff;
  --a-ink: #10234C; --a-mut: #6B7CA0; --a-line: #E2E8F4; --a-accent: #2A4689;
  --a-tint: rgba(42,70,137,.10); --a-grad: linear-gradient(165deg,#22488E,#12306F 60%,#0F2A63);
  color: var(--a-ink); font-family: var(--syr-font); font-size: 14px; line-height: 1.45; }

.cc-view { position: absolute; inset: 0; display: flex; flex-direction: column;
  opacity: 0; transform: translateX(12px); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease; overflow-y: auto; }
.cc-view.on { opacity: 1; transform: none; pointer-events: auto; }
.cc-sb { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px 4px; font-size: .68rem; font-weight: 600; flex: 0 0 auto; }
.cc-sb i { width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  display: inline-block; margin-left: 3px; }
.cc-view.grad { background: var(--a-grad); }
.cc-view.grad .cc-sb, .cc-view.grad .cc-hd { color: #fff; }

.cc-hd { padding: 4px 20px 18px; flex: 0 0 auto; }
.cc-hi { font-family: var(--syr-font-head); font-weight: 800; font-size: 1.45rem; margin: 4px 0 2px; }
.cc-hd p { font-size: .82rem; opacity: .82; margin: 0; }

.cc-bd { background: #fff; border-radius: 24px 24px 0 0; margin-top: auto;
  padding: 18px 16px 80px; flex: 1 0 auto; display: flex; flex-direction: column; gap: 13px; }
.cc-view:not(.grad) .cc-bd { margin-top: 0; border-radius: 0; }

.cc-kk { background: linear-gradient(140deg,#3E63B0,#1C3E86); color: #fff; border-radius: 18px;
  padding: 15px 16px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  box-shadow: 0 16px 30px -18px rgba(16,35,76,.55); }
.cc-kk .l { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.cc-kk .n { font-family: var(--syr-font-head); letter-spacing: .18em; font-size: .72rem; opacity: .9; margin: 3px 0 7px; }
.cc-kk .p { font-family: var(--syr-font-head); font-weight: 800; font-size: 1.75rem; line-height: 1; }
.cc-kk .p small { font-weight: 500; font-size: .68rem; opacity: .85; letter-spacing: .04em; }
.cc-qr { background: #fff; border-radius: 8px; padding: 5px; width: 58px; height: 58px; }
.cc-qr svg { display: block; width: 100%; height: 100%; }

.cc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.cc-tile { appearance: none; border: 1px solid var(--a-line); background: #fff; border-radius: 15px;
  padding: 13px 11px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 7px;
  color: var(--a-ink); font: inherit; transition: border-color .15s, transform .15s; }
.cc-tile:hover { border-color: var(--a-accent); transform: translateY(-2px); }
.cc-tile:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.cc-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--a-tint); color: var(--a-accent); flex: 0 0 auto; }
.cc-ic svg { width: 18px; height: 18px; }
.cc-tile b { font-family: var(--syr-font-head); font-size: .9rem; font-weight: 700; }

.cc-promo { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
  border: 1px solid var(--a-line); border-left: 3px solid var(--syr-success); background: #fff;
  border-radius: 13px; padding: 11px 12px; cursor: pointer; color: var(--a-ink); font: inherit;
  transition: border-color .15s; }
.cc-promo:hover { border-color: var(--a-accent); }
.cc-promo:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.cc-promo b { display: block; font-family: var(--syr-font-head); font-size: .85rem; }
.cc-promo span span { font-size: .75rem; color: var(--a-mut); }

.cc-inhd { display: flex; align-items: center; gap: 8px; padding: 6px 14px 12px;
  font-family: var(--syr-font-head); font-weight: 700; font-size: 1rem; color: var(--a-ink); flex: 0 0 auto; }
.cc-back { appearance: none; border: 1px solid var(--a-line); background: #fff; width: 30px; height: 30px;
  border-radius: 9px; cursor: pointer; color: var(--a-ink); display: grid; place-items: center; flex: 0 0 auto; }
.cc-back:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.cc-back svg { width: 15px; height: 15px; }
.cc-inbd { padding: 4px 16px 80px; display: flex; flex-direction: column; gap: 13px; color: var(--a-ink); }

.cc-qr-big { background: #fff; border: 1px solid var(--a-line); border-radius: 16px; padding: 16px;
  width: 164px; height: 164px; margin: 4px auto 0; }
.cc-qr-big svg { width: 100%; height: 100%; display: block; }
.cc-num { text-align: center; font-family: var(--syr-font-head); letter-spacing: .16em; font-size: .8rem;
  color: var(--a-mut); margin: 0; }
.cc-big { text-align: center; font-family: var(--syr-font-head); font-weight: 800; font-size: 1.8rem;
  line-height: 1; margin: 0; }
.cc-big small { font-size: .85rem; font-weight: 500; color: var(--a-mut); }
.cc-hint { font-size: .8rem; color: var(--a-mut); text-align: center; max-width: 30ch; margin: 0 auto; }

.cc-vc { display: flex; gap: 10px; align-items: center; border: 1px solid var(--a-line); background: #fff;
  border-radius: 12px; padding: 10px 11px; }
.cc-vc .cc-ic { width: 30px; height: 30px; }
.cc-vc .cc-ic svg { width: 16px; height: 16px; }
.cc-vc .t { flex: 1; min-width: 0; }
.cc-vc b { display: block; font-family: var(--syr-font-head); font-size: .82rem; }
.cc-vc span { font-size: .71rem; color: var(--a-mut); }
.cc-chip { appearance: none; border: 0; background: var(--a-accent); color: #fff; font: inherit;
  font-size: .71rem; font-weight: 600; padding: .32rem .64rem; border-radius: 999px; cursor: pointer; flex: 0 0 auto; }
.cc-chip:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }

.cc-ph-hero { background: var(--a-grad); color: #fff; border-radius: 16px; padding: 16px; }
.cc-ph-hero .k { font-family: var(--syr-font-head); font-weight: 800; font-size: 1.4rem; line-height: 1.05; }
.cc-ph-hero p { margin: 6px 0 0; font-size: .8rem; opacity: .9; }
.cc-ghost { appearance: none; border: 1px solid var(--a-line); background: #fff; color: var(--a-ink);
  font: inherit; font-family: var(--syr-font-head); font-weight: 600; font-size: .82rem;
  padding: .58rem .9rem; border-radius: 11px; cursor: pointer; width: 100%; }
.cc-ghost:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }

.cc-tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(8px);
  border-top: 1px solid var(--a-line); display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 6px 11px; }
.cc-tab { appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--a-mut);
  font-size: .57rem; font-weight: 600; padding: 4px 0; }
.cc-tab svg { width: 19px; height: 19px; }
.cc-tab[aria-current="page"] { color: var(--a-accent); }
.cc-tab:disabled { opacity: .5; cursor: default; }
.cc-tab:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; border-radius: 7px; }

.cc-pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
@media (max-width: 820px) { .cc-pts { flex-direction: row; flex-wrap: wrap; } .cc-pts li { flex: 1 1 14rem; } }
.cc-pts li { display: flex; gap: 11px; align-items: flex-start; background: var(--syr-surface);
  border: 1px solid var(--syr-border); border-radius: 14px; padding: 13px 14px; }
.cc-pts .k { width: 26px; height: 26px; border-radius: 7px; background: var(--syr-accent-tint);
  color: var(--syr-success); display: grid; place-items: center; flex: 0 0 auto; }
.cc-pts .k svg { width: 15px; height: 15px; }
.cc-pts b { font-family: var(--syr-font-head); font-size: .92rem; display: block; }
.cc-pts span { font-size: .84rem; color: var(--syr-text-soft); }

.cc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--syr-text); color: var(--syr-bg); font-size: .85rem; padding: .6rem 1rem;
  border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  z-index: 60; max-width: min(90vw, 26rem); text-align: center; }
.cc-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .cc-view { transition: none; }
  .cc-toast { transition: none; }
}

/* ============================================================
   CITYCARD – Kaufverhalten-Schaubild (Abschnitt "Warum eine CityCard?")
   Isotype-Pictogramm (10 Figuren) plus schlanke Kennzahl. Farbpaar
   validiert (dataviz: gruen #1F7A4D + Blau #3B5DA8, ΔE-CVD > 17);
   die dritte Gruppe ist bewusst nur Kontur (= "nicht im Ort").
   ============================================================ */
.cc-shop { width: 100%; display: flex; flex-direction: column; gap: var(--syr-space-5); }
.cc-shop-lead { margin: 0; font-family: var(--syr-font-head); font-weight: 700;
  font-size: 1.15rem; line-height: 1.25; }
.cc-shop-lead b { color: var(--syr-success); }

.cc-shop-grid { width: 100%; max-width: 268px; }
.cc-shop-grid svg { width: 100%; height: auto; display: block; overflow: visible; }
.cc-shop-ico-a { fill: var(--syr-success); }
.cc-shop-ico-b { fill: #3B5DA8; }
.cc-shop-ico-c { fill: none; stroke: var(--syr-text-muted); stroke-width: 1.6; }

.cc-shop-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 6px; font-size: .82rem; color: var(--syr-text-soft); }
.cc-shop-legend li { display: flex; align-items: center; gap: 8px; }
.cc-shop-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.cc-shop-legend .sw.a { background: var(--syr-success); }
.cc-shop-legend .sw.b { background: #3B5DA8; }
.cc-shop-legend .sw.c { background: transparent; border: 1.6px solid var(--syr-text-muted); }
.cc-shop-legend b { color: var(--syr-text); font-variant-numeric: tabular-nums; margin-left: auto; }

.cc-shop-div { border: 0; border-top: 1px solid var(--syr-border);
  margin: var(--syr-space-4) 0 var(--syr-space-3); width: 100%; }
.cc-shop-stat b { display: block; font-family: var(--syr-font-head); font-weight: 800;
  font-size: 1.6rem; color: var(--syr-text); line-height: 1; }
.cc-shop-stat p { margin: 3px 0 9px; font-size: .84rem; color: var(--syr-text-soft); }
.cc-shop-meter { height: 7px; border-radius: 999px; background: var(--syr-border); overflow: hidden; }
.cc-shop-meter i { display: block; height: 100%; width: 52%; border-radius: 999px; background: #3B5DA8; }

[data-theme="dark"] .cc-shop-lead b,
[data-theme="dark"] .cc-shop-ico-a { fill: #5FD09A; color: #5FD09A; }
[data-theme="dark"] .cc-shop-legend .sw.a { background: #5FD09A; }
[data-theme="dark"] .cc-shop-ico-b,
[data-theme="dark"] .cc-shop-meter i { fill: #7E9AD4; background: #7E9AD4; }
[data-theme="dark"] .cc-shop-legend .sw.b { background: #7E9AD4; }

/* ============================================================
   CITYCARD – Gutschein-Vielfalt (Abschnitt "Individuell für Ihre Stadt")
   Acht Anlass-Gutscheine als Raster. Die Beschreibung klappt bei
   Hover / Tastaturfokus auf; auf schmalen Schirmen ist sie immer
   sichtbar. Akzentfarbe je Karte ueber --gv (inline gesetzt).
   ============================================================ */
.gv-sub { font-family: var(--syr-font-head); font-weight: 700; font-size: 1.15rem;
  margin: var(--syr-space-8) 0 0; }
.gv-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--syr-space-4); margin-top: var(--syr-space-5); }
@media (max-width: 1000px){ .gv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .gv-grid { grid-template-columns: minmax(0,1fr); } }

.gv-card { display: flex; flex-direction: column; gap: var(--syr-space-3);
  background: var(--syr-surface); border: 1px solid var(--syr-border);
  border-left: 3px solid var(--gv, var(--syr-accent)); border-radius: var(--syr-radius);
  padding: var(--syr-space-5);
  transition: box-shadow var(--syr-dur), transform var(--syr-dur), border-color var(--syr-dur); }
.gv-card:hover { box-shadow: var(--syr-shadow); transform: translateY(-2px);
  border-color: var(--gv, var(--syr-accent)); }
.gv-card:focus-visible { outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gv, var(--syr-accent)) 40%, transparent), var(--syr-shadow); }
.gv-head { display: flex; align-items: center; gap: var(--syr-space-3); }
.gv-ico { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--gv, var(--syr-accent));
  background: color-mix(in srgb, var(--gv, var(--syr-accent)) 14%, transparent); }
.gv-ico svg { width: 20px; height: 20px; }
.gv-name { font-family: var(--syr-font-head); font-weight: 700; font-size: .92rem;
  letter-spacing: .02em; line-height: 1.2; color: var(--syr-text); }
.gv-desc { max-height: 0; opacity: 0; overflow: hidden; color: var(--syr-text-soft);
  font-size: .9rem; line-height: 1.5;
  transition: max-height var(--syr-dur) var(--syr-ease), opacity var(--syr-dur); }
.gv-card:hover .gv-desc, .gv-card:focus .gv-desc, .gv-card:focus-within .gv-desc {
  max-height: 9rem; opacity: 1; }
@media (max-width: 560px){ .gv-desc { max-height: 9rem; opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .gv-card, .gv-desc { transition: none; } }

/* ============================================================
   CITYCARD – Marketing-Center-Prototyp (Abschnitt "Marketing &
   Kundenbindung"). Tabs Vorlagen / Schnellversand / Auswertung,
   laeuft per syrcon-marketing.js als Tour ab. Farben ueber Tokens
   plus zwei gedeckte Akzente (--mc-push, --mc-violet) mit
   Dunkel-Overrides. Ohne JS bleibt der erste Tab sichtbar.
   ============================================================ */
.cc-mc { --mc-s2: var(--syr-surface-subtle); --mc-mail: var(--syr-blue-700);
  --mc-push: #B8862F; --mc-green: var(--syr-success); --mc-violet: #6A5AA6;
  --mc-b3: var(--syr-blue-200); --mc-b4: var(--syr-blue-900);
  margin-top: var(--syr-space-6); background: var(--syr-surface);
  border: 1px solid var(--syr-border); border-radius: 16px; overflow: hidden; box-shadow: var(--syr-shadow); }
[data-theme="dark"] .cc-mc { --mc-push: #D8A951; --mc-green: #5FD09A; --mc-violet: #A99BDA;
  --mc-b3: var(--syr-blue-300); --mc-b4: var(--syr-blue-200); }

.cc-mc .mc-top { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem;
  background: var(--mc-s2); border-bottom: 1px solid var(--syr-border); }
.cc-mc .mc-dots { display: flex; gap: 6px; }
.cc-mc .mc-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--syr-border); display: block; }
.cc-mc .mc-top b { font-family: var(--syr-font-head); font-size: .9rem; color: var(--syr-text); }
.cc-mc .mc-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.cc-mc .mc-demo { font-family: var(--syr-font-head); font-weight: 600; font-size: .66rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mc-push);
  background: color-mix(in srgb, var(--mc-push) 16%, transparent); padding: .28rem .6rem; border-radius: 999px; }
.cc-mc .mc-tour { appearance: none; border: 1px solid var(--syr-border); background: var(--syr-surface);
  color: var(--syr-text); font: inherit; font-family: var(--syr-font-head); font-weight: 600; font-size: .74rem;
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .62rem; border-radius: 999px; cursor: pointer; }
.cc-mc .mc-tour:hover { border-color: var(--syr-accent); }
.cc-mc .mc-tour:focus-visible { outline: 2px solid var(--syr-accent); outline-offset: 2px; }
.cc-mc .mc-tour svg { width: 11px; height: 11px; }

.cc-mc .mc-tabs { display: flex; gap: 2px; padding: .5rem .75rem 0; border-bottom: 1px solid var(--syr-border); }
.cc-mc .mc-tab { appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-family: var(--syr-font-head); font-weight: 600; font-size: .9rem; color: var(--syr-text-muted);
  padding: .6rem .9rem; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; }
.cc-mc .mc-tab:hover { color: var(--syr-text); }
.cc-mc .mc-tab[aria-selected="true"] { color: var(--mc-green); border-bottom-color: var(--mc-green); }
.cc-mc .mc-tab:focus-visible { outline: 2px solid var(--syr-accent); outline-offset: -2px; }

.cc-mc .mc-pane { padding: clamp(1rem, 3vw, 1.5rem); }
.cc-mc .mc-pane[hidden] { display: none; }

.cc-mc .mc-tpl { display: grid; grid-template-columns: minmax(0,15rem) minmax(0,1fr); gap: 1.25rem; }
@media (max-width: 760px){ .cc-mc .mc-tpl { grid-template-columns: minmax(0,1fr); } }
.cc-mc .mc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 26rem; overflow-y: auto; }
.cc-mc .mc-item { width: 100%; text-align: left; appearance: none; border: 1px solid var(--syr-border);
  background: var(--syr-surface); border-radius: 10px; padding: .6rem .7rem; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, background .15s; }
.cc-mc .mc-item:hover { border-color: var(--syr-accent); }
.cc-mc .mc-item:focus-visible { outline: 2px solid var(--syr-accent); outline-offset: 2px; }
.cc-mc .mc-item[aria-current="true"] { border-color: var(--syr-accent); background: var(--syr-accent-tint); }
.cc-mc .mc-item .mc-nm { font-family: var(--syr-font-head); font-weight: 600; font-size: .84rem; line-height: 1.25; color: var(--syr-text); }
.cc-mc .mc-badge { align-self: flex-start; font-family: var(--syr-font-head); font-weight: 700; font-size: .6rem;
  letter-spacing: .06em; text-transform: uppercase; padding: .16rem .42rem; border-radius: 5px; color: #fff; }
.cc-mc .mc-badge.mail { background: var(--mc-mail); }
.cc-mc .mc-badge.push { background: var(--mc-push); }

.cc-mc .mc-prev { border: 1px solid var(--syr-border); border-radius: 12px; overflow: hidden; background: var(--mc-s2); }
.cc-mc .mc-pbar { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
  background: var(--syr-surface); border-bottom: 1px solid var(--syr-border); flex-wrap: wrap; }
.cc-mc .mc-pbar .mc-nm { font-family: var(--syr-font-head); font-weight: 700; font-size: .92rem; color: var(--syr-text); }
.cc-mc .mc-ph { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--syr-text-muted); cursor: pointer; user-select: none; }
.cc-mc .mc-ph input { accent-color: var(--syr-accent); }
.cc-mc .mc-mail { padding: 1rem 1.1rem 1.3rem; }
.cc-mc .mc-subj { font-size: .84rem; color: var(--syr-text-muted); border-bottom: 1px dashed var(--syr-border);
  padding-bottom: .6rem; margin-bottom: .8rem; }
.cc-mc .mc-subj b { color: var(--syr-text); font-weight: 600; }
.cc-mc .mc-body { font-family: var(--syr-font); font-size: .9rem; white-space: pre-wrap; margin: 0;
  color: var(--syr-text-soft); line-height: 1.65; }
.cc-mc .mc-mf { background: color-mix(in srgb, var(--syr-accent) 16%, transparent); color: var(--syr-accent-text);
  border-radius: 4px; padding: 0 3px; font-weight: 600; font-size: .92em; }
.cc-mc .mc-fill { color: var(--syr-text); font-weight: 600;
  border-bottom: 2px solid color-mix(in srgb, var(--mc-green) 55%, transparent); }

.cc-mc .mc-qs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; }
@media (max-width: 760px){ .cc-mc .mc-qs { grid-template-columns: minmax(0,1fr); } }
.cc-mc .mc-qc { appearance: none; border: 1px solid var(--syr-border); background: var(--syr-surface);
  border-radius: 12px; padding: 1rem; text-align: left; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: .5rem; transition: border-color .15s, transform .15s; }
.cc-mc .mc-qc:hover { border-color: var(--syr-accent); transform: translateY(-2px); }
.cc-mc .mc-qc:focus-visible { outline: 2px solid var(--syr-accent); outline-offset: 2px; }
.cc-mc .mc-qc[aria-current="true"] { border-color: var(--syr-accent); box-shadow: 0 0 0 3px var(--syr-accent-tint); }
.cc-mc .mc-qi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.cc-mc .mc-qi svg { width: 18px; height: 18px; }
.cc-mc .mc-qc.mail .mc-qi { background: color-mix(in srgb, var(--mc-mail) 15%, transparent); color: var(--mc-mail); }
.cc-mc .mc-qc.multi .mc-qi { background: color-mix(in srgb, var(--mc-violet) 18%, transparent); color: var(--mc-violet); }
.cc-mc .mc-qc.push .mc-qi { background: color-mix(in srgb, var(--mc-push) 18%, transparent); color: var(--mc-push); }
.cc-mc .mc-qc b { font-family: var(--syr-font-head); font-size: .92rem; color: var(--syr-text); }
.cc-mc .mc-qc span { font-size: .82rem; color: var(--syr-text-muted); }

.cc-mc .mc-comp { margin-top: 1.1rem; border: 1px solid var(--syr-border); border-radius: 12px; padding: 1rem;
  background: var(--mc-s2); display: none; }
.cc-mc .mc-comp.on { display: block; }
.cc-mc .mc-fld { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; font-size: .85rem; }
.cc-mc .mc-fld label { color: var(--syr-text-muted); min-width: 5.5rem; }
.cc-mc .mc-fld .mc-chip { background: var(--syr-accent-tint); color: var(--syr-accent-text); border-radius: 999px;
  padding: .25rem .7rem; font-weight: 600; }
.cc-mc .mc-fld select { font: inherit; font-size: .85rem; padding: .35rem .5rem; border-radius: 8px;
  border: 1px solid var(--syr-border); background: var(--syr-surface); color: var(--syr-text); }
.cc-mc .mc-ta { width: 100%; min-height: 6rem; font: inherit; font-size: .86rem; line-height: 1.6;
  border: 1px solid var(--syr-border); border-radius: 10px; padding: .7rem .8rem; background: var(--syr-surface);
  color: var(--syr-text-soft); resize: vertical; white-space: pre-wrap; }
.cc-mc .mc-send { margin-top: .8rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cc-mc .mc-send button { appearance: none; border: 0; border-radius: 10px; padding: .55rem 1rem; font: inherit;
  font-family: var(--syr-font-head); font-weight: 700; font-size: .86rem; background: var(--syr-accent);
  color: #fff; cursor: pointer; }
[data-theme="dark"] .cc-mc .mc-send button { color: var(--syr-blue-900); }
.cc-mc .mc-send small { color: var(--syr-text-muted); font-size: .78rem; }

.cc-mc .mc-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; margin-bottom: 1.4rem; }
@media (max-width: 640px){ .cc-mc .mc-stats { grid-template-columns: minmax(0,1fr); } }
.cc-mc .mc-stat { border: 1px solid var(--syr-border); border-radius: 12px; padding: .9rem 1rem; background: var(--syr-surface); }
.cc-mc .mc-stat .k { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--syr-text-muted); }
.cc-mc .mc-stat .k svg { width: 15px; height: 15px; }
.cc-mc .mc-stat .v { font-family: var(--syr-font-head); font-weight: 800; font-size: 1.7rem; line-height: 1.1; margin: .3rem 0 0; }
.cc-mc .mc-stat.a .v { color: var(--mc-violet); }
.cc-mc .mc-stat.b .v { color: var(--syr-text-muted); }
.cc-mc .mc-stat.c .v { color: var(--mc-green); }
.cc-mc .mc-stat .s { font-size: .76rem; color: var(--syr-text-muted); }

.cc-mc .mc-fh { font-family: var(--syr-font-head); font-weight: 700; font-size: 1rem; margin: 0 0 .9rem; color: var(--syr-text); }
.cc-mc .mc-bar { margin-bottom: 1rem; }
.cc-mc .mc-bt { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; margin-bottom: .3rem; }
.cc-mc .mc-bt b { font-family: var(--syr-font-head); color: var(--syr-text); }
.cc-mc .mc-bt .n { color: var(--syr-text-muted); font-variant-numeric: tabular-nums; }
.cc-mc .mc-tr { height: 12px; border-radius: 999px; background: var(--syr-border); overflow: hidden; }
.cc-mc .mc-fl { height: 100%; border-radius: 999px; width: 0; transition: width .9s cubic-bezier(.3,.7,.3,1); }
.cc-mc .mc-bar.b1 .mc-fl { background: var(--mc-b3); }
.cc-mc .mc-bar.b2 .mc-fl { background: var(--mc-green); }
.cc-mc .mc-bar.b3 .mc-fl { background: var(--mc-violet); }
.cc-mc .mc-bar.b4 .mc-fl { background: var(--mc-b4); }
.cc-mc .mc-foot { font-size: .78rem; color: var(--syr-text-muted); margin: .4rem 0 0; }

.cc-mc .mc-cue { position: relative; }
.cc-mc .mc-cue::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc-green) 55%, transparent); opacity: 0; animation: mc-pulse 1.1s ease-out; }
@keyframes mc-pulse { 0% { opacity: .9; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cc-mc .mc-qc, .cc-mc .mc-fl { transition: none; }
  .cc-mc .mc-cue::after { animation: none; }
}

/* CityCard – Ansprechpartner-Karte im Schluss-CTA */
.cc-contact { text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; }
.cc-contact img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: center 25%;
  margin-bottom: var(--syr-space-4); box-shadow: var(--syr-shadow-sm); }
.cc-contact .eb { font-family: var(--syr-font-head); font-weight: 600; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--syr-accent-text); margin: 0; }
.cc-contact .nm { font-family: var(--syr-font-head); font-weight: 700; font-size: 1.15rem; margin: 4px 0 0; }
.cc-contact .rl { color: var(--syr-text-muted); font-size: .9rem; margin: 2px 0 0; }
.cc-contact .rows { display: flex; flex-direction: column; gap: 6px; margin-top: var(--syr-space-5); }
.cc-contact .rows a { display: inline-flex; align-items: center; gap: 8px; color: var(--syr-text);
  text-decoration: none; font-size: .95rem; }
.cc-contact .rows a:hover { color: var(--syr-accent-text); }
.cc-contact .rows svg { width: 16px; height: 16px; color: var(--syr-accent-text); flex: 0 0 auto; }
.cc-contact .soc { display: flex; gap: 10px; margin-top: var(--syr-space-5); }
.cc-contact .soc a { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--syr-accent-tint); color: var(--syr-accent-text);
  transition: background var(--syr-dur), color var(--syr-dur); }
.cc-contact .soc a:hover { background: var(--syr-accent); color: #fff; }
.cc-contact .soc svg { width: 16px; height: 16px; }
.syr-section.dark .cc-contact .soc a { background: rgba(255,255,255,.10); color: var(--syr-blue-200); }
.syr-section.dark .cc-contact .soc a:hover { background: var(--syr-blue-200); color: var(--syr-blue-900); }

/* ============================================================
   KUNDENBINDUNG – Quellen-Nabe ("Aus Datensilos wird eine
   360-Grad-Sicht"). Acht Datenquellen als Icon-Knoten um den
   CRM-navigator; gepunktete Linien fliessen zur Mitte, ein Puls
   laeuft auf dem Ring. Namen stehen in der Legende darunter.
   ============================================================ */
.crm-hub { width: 100%; max-width: 24rem; margin-inline: auto; }
.crm-hub svg { width: 100%; height: auto; display: block; overflow: visible; }
.crm-hub .ch-ring { fill: none; stroke: var(--syr-border); stroke-width: 1; }
.crm-hub .ch-line { stroke: var(--syr-blue-300); stroke-width: 1.4; stroke-dasharray: 2 3.5;
  stroke-linecap: round; animation: ch-flow 1.3s linear infinite; }
@keyframes ch-flow { to { stroke-dashoffset: -11; } }
.crm-hub .ch-node { fill: var(--syr-blue-900); }
.crm-hub .ch-ico { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crm-hub .ch-card { fill: var(--syr-blue-900); }
.crm-hub .ch-card-t { fill: #fff; font-family: var(--syr-font-head); font-weight: 700; }
.crm-hub .ch-rotor { transform-origin: 80px 64px; animation: ch-spin 12s linear infinite; }
.crm-hub .ch-pulse { fill: var(--syr-blue-300); filter: drop-shadow(0 0 2px var(--syr-blue-300)); }
@keyframes ch-spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .crm-hub .ch-node, [data-theme="dark"] .crm-hub .ch-card { fill: var(--syr-blue-300); }
[data-theme="dark"] .crm-hub .ch-ico { stroke: var(--syr-blue-900); }
[data-theme="dark"] .crm-hub .ch-card-t { fill: var(--syr-blue-900); }

.crm-hub-legend { list-style: none; margin: var(--syr-space-5) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; font-size: .82rem; color: var(--syr-text-soft); }
.crm-hub-legend li { display: flex; align-items: center; gap: 7px; }
.crm-hub-legend .d { width: 6px; height: 6px; border-radius: 50%; background: var(--syr-blue-700); flex: 0 0 auto; }

.js-reveal .crm-hub svg { opacity: 0; transform: scale(.94); transition: opacity .5s ease, transform .5s ease; }
.js-reveal .crm-hub.is-in svg { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .crm-hub .ch-line, .crm-hub .ch-rotor { animation: none; }
  .js-reveal .crm-hub svg { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   KUNDENBINDUNG – Drei-Phasen-Ablauf ("Zuhoeren. Verstehen.
   Begeistern."). Drei Karten, eine Lauflinie dahinter, die
   Hervorhebung wandert zyklisch 1 -> 2 -> 3. Reines CSS; startet
   beim Reinscrollen (syrcon-reveal.js), pausiert ausserhalb.
   ============================================================ */
.phase-flow { position: relative; margin-top: var(--syr-space-12); }
.pf-track { display: none; }
@media (min-width: 721px) {
  .pf-track { display: block; position: absolute; top: 40px; left: 17%; right: 17%; height: 2px;
    background: var(--syr-border); border-radius: 2px; overflow: hidden; }
  .pf-track::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 45%;
    background: linear-gradient(90deg, transparent, var(--syr-blue-300), transparent);
    animation: pf-sweep 9s linear infinite; }
}
@keyframes pf-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }

.pf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--syr-space-6); position: relative; }
@media (max-width: 720px) { .pf-steps { grid-template-columns: 1fr; } }
.pf-step { background: var(--syr-surface); border: 1px solid var(--syr-border); border-radius: var(--syr-radius);
  padding: var(--syr-space-6); position: relative;
  transition: box-shadow .4s, transform .4s, border-color .4s;
  animation: pf-pulse 9s ease-in-out infinite; animation-delay: calc(var(--i) * 3s); }
.pf-num { position: absolute; top: -13px; left: var(--syr-space-6); width: 26px; height: 26px; border-radius: 50%;
  background: var(--syr-blue-900); color: #fff; font-family: var(--syr-font-head); font-weight: 700; font-size: .8rem;
  display: grid; place-items: center; }
.pf-step .feat-icon { margin: var(--syr-space-2) 0 var(--syr-space-4); }
.pf-step h3 { margin: 0 0 var(--syr-space-2); }
.pf-step p { margin: 0; }
@keyframes pf-pulse {
  0%, 5%   { border-color: var(--syr-border); box-shadow: none; transform: none; }
  11%, 25% { border-color: var(--syr-blue-300); box-shadow: var(--syr-shadow); transform: translateY(-4px); }
  31%, 100%{ border-color: var(--syr-border); box-shadow: none; transform: none; }
}
.js-reveal .phase-flow .pf-step,
.js-reveal .phase-flow .pf-track::after { animation-play-state: paused; }
.js-reveal .phase-flow.is-in .pf-step,
.js-reveal .phase-flow.is-in .pf-track::after { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .pf-step { animation: none; }
  .pf-track { display: none; }
}

/* ============================================================
   KUNDENBINDUNG – Beleg-Karten "Der Wert der Kundenbindung".
   Grosse Zahl + Balken je Aussage, Akzentfarbe pro Karte (--wc).
   Balken wachsen beim Reinscrollen (syrcon-reveal.js); ohne JS
   sind sie sofort voll.
   ============================================================ */
.wov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--syr-space-6); margin-top: var(--syr-space-10); }
@media (max-width: 720px){ .wov-grid { grid-template-columns: 1fr; } }
.wov-card { background: var(--syr-surface); border: 1px solid var(--syr-border);
  border-left: 3px solid var(--wc, var(--syr-accent)); border-radius: var(--syr-radius); padding: var(--syr-space-6); }
.wov-card .num { font-family: var(--syr-font-head); font-weight: 800; font-size: 2.1rem; line-height: 1;
  color: var(--wc, var(--syr-accent)); }
.wov-card .viz { margin: var(--syr-space-4) 0; }
.wov-card .viz svg { width: 100%; height: 14px; display: block; }
.wov-track { fill: var(--syr-border); }
.wov-card.pareto .wov-track { fill: color-mix(in srgb, var(--wc) 28%, transparent); }
.wov-bar { fill: var(--wc, var(--syr-accent)); width: calc(var(--w, 0) * 1%);
  transition: width 1s cubic-bezier(.3,.7,.3,1); }
.js-reveal .wov-card:not(.is-in) .wov-bar { width: 0; }
.wov-card .txt { color: var(--syr-text-soft); font-size: 1rem; margin: 0 0 var(--syr-space-2); }
.wov-card .src { color: var(--syr-text-muted); font-size: .8rem; margin: 0; }
.wov-card .ico { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--wc) 16%, transparent); color: var(--wc); margin-bottom: var(--syr-space-3); }
.wov-card .ico svg { width: 20px; height: 20px; }

/* Grundlagen (/data-analytics/): Beispiel-Kundenscorecards RFM */
.rfm-card { background: var(--syr-surface); border: 1px solid var(--syr-border); border-left: 3px solid var(--syr-border);
  border-radius: var(--syr-radius); padding: var(--syr-space-5) var(--syr-space-6); }
.rfm-card.good { border-left-color: var(--syr-success); }
.rfm-card.risk { border-left-color: var(--syr-danger); }
.rfm-head { display: flex; align-items: center; gap: var(--syr-space-3); margin-bottom: var(--syr-space-4); }
.rfm-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--syr-surface-subtle); color: var(--syr-text-soft); font-family: var(--syr-font-head); font-weight: 700; font-size: .82rem; }
.rfm-head b { display: block; font-family: var(--syr-font-head); font-size: .96rem; color: var(--syr-text); }
.rfm-head > div > span { font-size: .8rem; color: var(--syr-text-muted); }
.rfm-tag { margin-left: auto; font-family: var(--syr-font-head); font-weight: 700; font-size: .72rem; letter-spacing: .02em;
  border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.rfm-tag.good { background: color-mix(in srgb, var(--syr-success) 16%, transparent); color: var(--syr-success); }
.rfm-tag.risk { background: color-mix(in srgb, var(--syr-danger) 14%, transparent); color: var(--syr-danger); }
.rfm-bars { display: flex; flex-direction: column; gap: var(--syr-space-2); }
.rfm-bar { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: var(--syr-space-3); font-size: .78rem; color: var(--syr-text-muted); }
.rfm-bar i { display: block; height: 8px; border-radius: 999px; background: var(--syr-border); position: relative; font-style: normal; overflow: hidden; }
.rfm-bar i::after { content: ""; position: absolute; inset: 0; width: var(--v, 0%); border-radius: 999px; background: var(--syr-blue-700); }
.rfm-card.good .rfm-bar i::after { background: var(--syr-success); }
.rfm-card.risk .rfm-bar i::after { background: var(--syr-danger); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .wov-card .wov-bar { width: calc(var(--w,0) * 1%); transition: none; }
}

/* Kundenbindung – Ring-Anzeige (Abschnitt "Die Zeichen der Zeit erkennen") */
.gauge { width: 148px; height: 148px; margin: 0 auto var(--syr-space-4); position: relative; }
.gauge svg { width: 100%; height: 100%; display: block; }
.gauge .g-track { fill: none; stroke: var(--syr-border); stroke-width: 9; }
.gauge .g-arc { fill: none; stroke: var(--syr-accent); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 251.3; stroke-dashoffset: 42.7; transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.1s cubic-bezier(.3,.7,.3,1); }
.gauge .g-num { position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--syr-font-head); font-weight: 800; font-size: 1.9rem; color: var(--syr-accent); }
.js-reveal .gauge:not(.is-in) .g-arc { stroke-dashoffset: 251.3; }
@media (prefers-reduced-motion: reduce) { .gauge .g-arc { transition: none; } }

/* ============================================================
   KUNDENBINDUNG – Loyalty-Store-Szene (Abschnitt "Was ist der
   CRM-navigator?"). Inline-SVG: Laden, zwei Kunden, schwebende
   Belohnungs-Chips (Punkte, Coupon, Bonus). Rein dekorativ.
   ============================================================ */
.store-scene { width: 100%; max-width: 24rem; margin-inline: auto; }
.store-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.store-scene .ss-wall, .store-scene .ss-win, .store-scene .ss-door-o {
  fill: none; stroke: var(--syr-blue-900); stroke-width: 2; stroke-linejoin: round; }
.store-scene .ss-awning { fill: var(--syr-blue-700); }
.store-scene .ss-door { fill: var(--syr-accent-tint); }
.store-scene .ss-person { fill: var(--syr-blue-900); }
.store-scene .ss-ground { stroke: var(--syr-blue-300); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
.store-scene .ss-link { stroke: var(--syr-blue-300); stroke-width: 1.4; stroke-dasharray: 2 3.5;
  stroke-linecap: round; fill: none; }
.store-scene .ss-chip rect { fill: var(--syr-accent-tint); }
.store-scene .ss-chip-i { fill: var(--syr-accent-text); }
.store-scene .ss-chip-t { fill: var(--syr-accent-text); font-family: var(--syr-font-head); font-weight: 700; font-size: 8px; }
.store-scene .ss-chip { animation: ss-bob 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ss-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
[data-theme="dark"] .store-scene .ss-wall,
[data-theme="dark"] .store-scene .ss-win,
[data-theme="dark"] .store-scene .ss-person { stroke: var(--syr-blue-300); fill: var(--syr-blue-300); }
[data-theme="dark"] .store-scene .ss-person { stroke: none; }
.js-reveal .store-scene svg { opacity: 0; transform: scale(.95); transition: opacity .5s, transform .5s; }
.js-reveal .store-scene.is-in svg { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .store-scene .ss-chip { animation: none; }
  .js-reveal .store-scene svg { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PRODUKTSEITEN – "Lösung dahinter": schlanke Zeile unter dem Hero,
   die das technische Syrcon-Produkt (mit Logo) benennt.
   ============================================================ */
.solution-note { background: var(--syr-surface); border-block: 1px solid var(--syr-border); }
.solution-note .syr-container { display: flex; align-items: center; gap: var(--syr-space-4);
  padding-block: var(--syr-space-5); flex-wrap: wrap; }
.solution-note img { height: 26px; width: auto; flex: 0 0 auto; }
.solution-note p { margin: 0; font-size: .95rem; color: var(--syr-text-soft); line-height: 1.5; }
.solution-note strong { color: var(--syr-accent-text); font-weight: var(--syr-fw-semibold); }
/* Beide Band-Buttons (Kundenlogin, Produktseite): gefüllt, linksbündig
   direkt hinter dem Text. */
.solution-note .sn-login, .solution-note .sn-more { flex: 0 0 auto; display: inline-flex; align-items: center; }
.solution-note .sn-login svg { margin-right: .45em; }

/* Produkt-Logo neben dem Schluss-CTA-Button (nie hoeher als der Button) */
.cta-with-logo { display: flex; align-items: center; gap: var(--syr-space-6); flex-wrap: wrap; }
.cta-with-logo .cta-logo { height: 30px; width: auto; flex: 0 0 auto; }

/* Startseite – Lösungs-Logo in den vier Lösungskarten */
.card-sol-logo { height: 21px; width: auto; display: block; margin: var(--syr-space-4) 0 var(--syr-space-2); opacity: .9; }

/* Leistungsumfang (Kundenbindung): Tag-Wolke + Analytisch/Prädiktiv-Vergleich */
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--syr-space-2); margin-top: var(--syr-space-3); }
.crm-ap { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--syr-space-6);
  align-items: stretch; margin-top: var(--syr-space-8); }
.crm-ap-card { background: var(--syr-surface); border: 1px solid var(--syr-border);
  border-radius: var(--syr-radius); padding: var(--syr-space-6); }
.crm-ap-card .feat-head { margin-bottom: var(--syr-space-3); }
.crm-ap-card .feat-icon { width: 44px; height: 44px; border-radius: 12px; }
.crm-ap-card .feat-icon svg { width: 22px; height: 22px; }
.crm-ap-card h4 { font-family: var(--syr-font-head); font-size: 1.05rem; margin: 0; line-height: 1.3; }
.crm-ap-card h4 span { display: block; font-size: .8rem; font-weight: var(--syr-fw-medium);
  letter-spacing: var(--syr-tracking-eyebrow); text-transform: uppercase; color: var(--syr-text-muted); }
.crm-ap-card > p { margin: 0; color: var(--syr-text-muted); font-size: .95rem; }
.crm-ap-arrow { color: var(--syr-blue-300); display: flex; align-items: center; justify-content: center; }
.crm-ap-arrow svg { width: 46px; height: 24px; display: block; }
@media (max-width: 820px) {
  .crm-ap { grid-template-columns: 1fr; }
  .crm-ap-arrow { justify-self: center; transform: rotate(90deg); margin: var(--syr-space-1) 0; }
}

/* ============================================================
   CRM-navigator-Prototyp (Abschnitt "Kampagnenmanagement", /kundenbindung/)
   Aufbau analog zum Marketing-Center (.cc-mc): Fenster-Chrome, Tabs,
   Panes; Tour laeuft selbst ab, jede Interaktion haelt sie an.
   ============================================================ */
.crm-win { border: 1px solid var(--syr-border); border-radius: var(--syr-radius-lg);
  overflow: hidden; background: var(--syr-surface); box-shadow: var(--syr-shadow);
  --crm-a: var(--syr-blue-700); --crm-ok: var(--syr-success); }
.crm-win .crm-top { display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem;
  background: var(--syr-blue-900); color: #fff; }
.crm-win .crm-dots { display: flex; gap: 6px; }
.crm-win .crm-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); display: block; }
.crm-win .crm-top b { font-family: var(--syr-font-head); font-size: .9rem; white-space: nowrap; }
@media (max-width: 480px){ .crm-win .crm-tour span { display: none; } }
.crm-win .crm-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.crm-win .crm-demo { font-family: var(--syr-font-head); font-weight: 700; font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; background: rgba(255,255,255,.16); border-radius: 999px; padding: .2rem .55rem; }
.crm-win .crm-tour { appearance: none; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08);
  color: #fff; border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .78rem;
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.crm-win .crm-tour:hover { background: rgba(255,255,255,.18); }
.crm-win .crm-tour:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.crm-win .crm-tour svg { width: 12px; height: 12px; }

.crm-win .crm-tabs { display: flex; gap: 2px; padding: 0 .6rem; border-bottom: 1px solid var(--syr-border);
  background: var(--syr-surface-subtle); overflow-x: auto; }
.crm-win .crm-tab { appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-family: var(--syr-font-head); font-weight: 600; font-size: .82rem; white-space: nowrap;
  color: var(--syr-text-muted); padding: .7rem .9rem; border-bottom: 2px solid transparent; }
.crm-win .crm-tab:hover { color: var(--syr-text); }
.crm-win .crm-tab[aria-selected="true"] { color: var(--syr-accent-text); border-bottom-color: var(--syr-accent); background: var(--syr-surface); }
.crm-win .crm-tab:focus-visible { outline: 2px solid var(--syr-accent); outline-offset: -2px; }

.crm-win .crm-pane { padding: clamp(1rem, 3vw, 1.6rem); }
.crm-win .crm-pane[hidden] { display: none; }
.crm-win .crm-lead { margin: 0 0 1.1rem; font-size: .9rem; color: var(--syr-text-muted); max-width: 60ch; }

/* Formzeilen (Zielgruppe + Kampagne) */
.crm-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .8rem 1.4rem; }
@media (max-width: 640px){ .crm-grid { grid-template-columns: minmax(0,1fr); } }
.crm-frow { display: flex; flex-direction: column; gap: .3rem; }
.crm-frow > span { font-family: var(--syr-font-head); font-size: .74rem; letter-spacing: var(--syr-tracking-eyebrow);
  text-transform: uppercase; color: var(--syr-text-muted); }
.crm-frow select, .crm-frow input[type="text"] { font: inherit; font-size: .88rem; padding: .5rem .6rem;
  border: 1px solid var(--syr-border); border-radius: 8px; background: var(--syr-surface); color: var(--syr-text); width: 100%; }
.crm-frow input[readonly] { color: var(--syr-text-muted); background: var(--syr-surface-subtle); }
.crm-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--syr-text); cursor: pointer; }
.crm-check input { accent-color: var(--syr-accent); width: 17px; height: 17px; }

/* Treffer-Zaehler */
.crm-count-box { margin-top: 1.3rem; border: 1px solid var(--syr-border); border-radius: 12px;
  background: var(--syr-surface-subtle); padding: 1rem 1.1rem; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.crm-count-box .k { font-family: var(--syr-font-head); font-size: .76rem; letter-spacing: var(--syr-tracking-eyebrow);
  text-transform: uppercase; color: var(--syr-text-muted); }
.crm-count-box .v { font-family: var(--syr-font-head); font-weight: 800; font-size: 2rem; line-height: 1;
  color: var(--syr-accent-text); font-variant-numeric: tabular-nums; }
.crm-count-box .s { font-size: .82rem; color: var(--syr-text-muted); }

/* Kanal-Chips */
.crm-chan { display: flex; flex-wrap: wrap; gap: .5rem; }
.crm-chan label { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem;
  border: 1px solid var(--syr-border); border-radius: 999px; padding: .35rem .7rem; cursor: pointer; background: var(--syr-surface); }
.crm-chan input { accent-color: var(--syr-accent); }
.crm-ksum { margin-top: 1.2rem; font-size: .9rem; color: var(--syr-text-soft); }
.crm-ksum b { color: var(--syr-accent-text); }

/* Kunde 360 */
.crm-khead { border: 1px solid var(--syr-border); border-radius: 10px; padding: .7rem .9rem;
  background: var(--syr-surface-subtle); font-size: .86rem; color: var(--syr-text-soft); margin-bottom: 1rem; }
.crm-khead b { color: var(--syr-text); }
.crm-kchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.crm-kchip { appearance: none; border: 1px solid var(--syr-border); background: var(--syr-surface); cursor: pointer;
  font: inherit; font-family: var(--syr-font-head); font-weight: 600; font-size: .8rem; color: var(--syr-text-muted);
  border-radius: 999px; padding: .35rem .8rem; }
.crm-kchip:hover { color: var(--syr-text); border-color: var(--syr-accent); }
.crm-kchip[aria-current="true"] { color: var(--syr-accent-text); border-color: var(--syr-accent); background: var(--syr-accent-tint); }
.crm-kchip:focus-visible { outline: 2px solid var(--syr-accent); outline-offset: 2px; }
.crm-kbody { border: 1px solid var(--syr-border); border-radius: 10px; padding: 1rem 1.1rem;
  font-size: .9rem; line-height: 1.7; color: var(--syr-text-soft); }
.crm-kbody b { color: var(--syr-text); }

/* Auswertung */
.crm-bar { margin-bottom: 1rem; }
.crm-bt { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; margin-bottom: .3rem; }
.crm-bt b { font-family: var(--syr-font-head); color: var(--syr-text); }
.crm-bt span { color: var(--syr-text-muted); font-variant-numeric: tabular-nums; }
.crm-tr { height: 12px; border-radius: 999px; background: var(--syr-border); overflow: hidden; }
.crm-fl { height: 100%; border-radius: 999px; width: 0; transition: width .9s cubic-bezier(.3,.7,.3,1); background: var(--syr-blue-300); }
.crm-bar.b1 .crm-fl { background: var(--syr-blue-300); }
.crm-bar.b2 .crm-fl { background: var(--syr-blue-700); }
.crm-bar.b3 .crm-fl { background: var(--syr-accent); }
.crm-bar.b4 .crm-fl { background: var(--crm-ok); }
.crm-cg { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 560px){ .crm-cg { grid-template-columns: 1fr; } }
.crm-cg-tile { border: 1px solid var(--syr-border); border-radius: 12px; padding: .9rem 1rem; background: var(--syr-surface); }
.crm-cg-tile .k { display: block; font-size: .78rem; color: var(--syr-text-muted); }
.crm-cg-tile .v { display: block; font-family: var(--syr-font-head); font-weight: 800; font-size: 1.6rem; margin: .25rem 0 0; }
.crm-cg-tile.win { border-color: var(--crm-ok); }
.crm-cg-tile.win .v { color: var(--crm-ok); }
.crm-foot { font-size: .8rem; color: var(--syr-text-muted); margin: 1rem 0 0; }

.crm-cue { position: relative; }
.crm-cue::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--syr-accent); animation: crm-cue 1.1s var(--syr-ease); }
@keyframes crm-cue { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .crm-win .crm-fl { transition: none; }
  .crm-cue::after { animation: none; }
}
.crm-cg-tile .s { display: block; font-size: .8rem; color: var(--syr-text-muted); margin-top: .25rem; }

/* Karriere (/unternehmen/): Haken-Liste "Das bieten wir" */
.chk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--syr-space-3); }
.chk-list li { display: flex; align-items: flex-start; gap: var(--syr-space-3); font-size: .95rem; color: var(--syr-text-soft); }
.chk-list svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--syr-blue-200); }

/* ============================================================
   VOLLTEXTSUCHE (Header-Button + Overlay, syrcon-search.js)
   ============================================================ */
.nav-search { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; border:1px solid var(--syr-border); background:transparent; color:var(--syr-text);
  cursor:pointer; flex:none; transition: border-color var(--syr-dur), color var(--syr-dur), background var(--syr-dur); }
.nav-search:hover { border-color: var(--syr-accent); color: var(--syr-accent); }
.nav-search:focus-visible { outline: 3px solid var(--syr-accent); outline-offset: 2px; }

.search-ov { position:fixed; inset:0; z-index:200; display:none;
  background: rgba(9,20,52,.55); backdrop-filter: blur(3px);
  padding: 12vh var(--syr-space-6) var(--syr-space-6); }
.search-ov.open { display:block; }
.search-box { max-width: 640px; margin-inline:auto; background: var(--syr-surface);
  border:1px solid var(--syr-border); border-radius: var(--syr-radius);
  box-shadow: var(--syr-shadow-lg); overflow:hidden; }
.search-box input { width:100%; box-sizing:border-box; border:0; background:transparent;
  padding: var(--syr-space-5) var(--syr-space-6); font-size:1.1rem; font-family:inherit;
  color: var(--syr-text); outline:none; }
.search-box input::placeholder { color: var(--syr-text-muted); }
.search-res { list-style:none; margin:0; padding:0; max-height: 60vh; overflow-y:auto; }
.search-res:not(:empty) { border-top:1px solid var(--syr-border); }
.search-res li a { display:flex; align-items:baseline; gap: var(--syr-space-3);
  padding: var(--syr-space-4) var(--syr-space-6); text-decoration:none; color: var(--syr-text);
  border-bottom:1px solid var(--syr-border); }
.search-res li:last-child a { border-bottom:0; }
.search-res li a:hover, .search-res li a.active { background: var(--syr-accent-tint); }
.search-res .r-t { font-family: var(--syr-font-head); font-weight:600; }
.search-res .r-s { margin-left:auto; font-size:.78rem; color: var(--syr-text-muted); white-space:nowrap; }
.search-empty { padding: var(--syr-space-5) var(--syr-space-6); color: var(--syr-text-muted); }

/* Case-Study-Übersicht: nach Produkt gruppierte Abschnitte
   (/campus/case-studies/, erzeugt von transform-pages.py build_listing). */
.cs-group + .cs-group { margin-top: var(--syr-space-12); }
.cs-group .feat-head { margin-bottom: var(--syr-space-6); }

/* Video-Verweis am Ende einzelner Case Studies (transform-pages.py) */
.cs-video { display:flex; flex-wrap:wrap; gap: var(--syr-space-3); margin: var(--syr-space-4) 0 var(--syr-space-8); }

/* ============================================================
   WHITEPAPER (/campus/whitepaper/, transform-pages.py build_whitepapers)
   ============================================================ */
.prose .wp-fig { margin: var(--syr-space-8) 0; }
.prose .wp-fig img { display:block; width:100%; max-width:680px; margin-inline:auto;
  border:1px solid var(--syr-border); border-radius: var(--syr-radius); }
.prose .wp-fig figcaption { margin-top: var(--syr-space-3); text-align:center;
  font-size:.85rem; color: var(--syr-text-muted); }
.prose .wp-box { margin: var(--syr-space-8) 0; padding: var(--syr-space-6) var(--syr-space-7);
  background: var(--syr-accent-tint); border-left: 3px solid var(--syr-accent);
  border-radius: 0 var(--syr-radius) var(--syr-radius) 0; }
.prose .wp-box-t { font-family: var(--syr-font-head); font-weight:700; color: var(--syr-accent);
  margin: 0 0 var(--syr-space-3); }
.prose .wp-box p:last-child, .prose .wp-box ul:last-child { margin-bottom: 0; }
.prose .wp-quote-src { display:block; margin-top: var(--syr-space-3); font-style: normal;
  font-size:.9rem; color: var(--syr-text-muted); }
.wp-dl { margin-top: var(--syr-space-10); }
.wp-card-links { display:flex; gap: var(--syr-space-5); margin-top: var(--syr-space-4); }