Plugin erweitert, um die CSS-Datei zu aktualisieren und die neuen Styles für die Juconnect Patterns hinzuzufügen. Außerdem wurden einige Anpassungen am Footer und den Funktionen des Juconnect Strict Themes vorgenommen, um die Kompatibilität mit den neuen Patterns zu gewährleisten. Alle Änderungen wurden in den entsprechenden ZIP-Dateien aktualisiert, um sicherzustellen, dass die neuesten Versionen der Plugins und Themes bereitgestellt werden können.

juconnect-patterns-plugin/juconnect-patterns/assets/css/juconnect-patterns.css

@@ -0,0 +1,219 @@
+.ju-process-flow {
+  --ju-flow-gap: var(--s4, 18px);
+  --ju-step-stack-gap: var(--s4, 18px);
+  --ju-step-body-mt: var(--s2, 10px);
+}
+
+.ju-process-flow__steps,
+.ju-process-flow__steps > .wp-block-group__inner-container {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(260px, 1fr);
+  gap: var(--ju-flow-gap);
+  align-items: start;
+  counter-reset: ju-flow-step;
+}
+
+.ju-process-flow__steps {
+  position: relative;
+  overflow-x: auto;
+  padding: 2px calc(var(--s6, 32px) + 6px) var(--s3, 14px) 2px;
+}
+
+.ju-process-flow__steps::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 30px;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(29, 53, 79, 0.12) 0%, rgba(29, 53, 79, 0.3) 50%, rgba(29, 53, 79, 0.12) 100%);
+  pointer-events: none;
+}
+
+.ju-process-flow__steps > .wp-block-group__inner-container {
+  width: max(100%, max-content);
+  min-width: 100%;
+  max-width: none !important;
+  margin: 0 !important;
+}
+
+.ju-process-flow__steps > .ju-process-step,
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step {
+  counter-increment: ju-flow-step;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: var(--ju-step-stack-gap);
+  min-width: 260px;
+  max-width: none;
+  --ju-step-head: var(--primary, #1d354f);
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(2),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(2) {
+  --ju-step-head: #255683;
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(3),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(3) {
+  --ju-step-head: #2b6cb0;
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(4),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(4) {
+  --ju-step-head: #235e9a;
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(5),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(5) {
+  --ju-step-head: #1f4d7e;
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(6),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(6) {
+  --ju-step-head: #183d64;
+}
+
+.ju-process-step__head,
+.ju-process-step > .ju-process-step__label {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  padding: 11px 72px 11px 16px;
+  border: 1px solid rgba(16, 25, 34, 0.16);
+  border-radius: 12px;
+  color: #ffffff !important;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
+    var(--ju-step-head) !important;
+  box-shadow: 0 10px 22px rgba(16, 25, 34, 0.14);
+  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 12px 50%);
+  transition: transform 0.16s ease, box-shadow 0.2s ease;
+}
+
+.ju-process-step__head > .wp-block-group__inner-container {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+}
+
+.ju-process-step__head::after,
+.ju-process-step > .ju-process-step__label::after {
+  content: counter(ju-flow-step, decimal-leading-zero);
+  position: absolute;
+  right: 26px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1.65rem;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  color: rgba(255, 255, 255, 0.94);
+  font-variant-numeric: tabular-nums;
+}
+
+.ju-process-flow__steps > .ju-process-step:last-child .ju-process-step__head,
+.ju-process-flow__steps > .ju-process-step:last-child > .ju-process-step__label,
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child .ju-process-step__head,
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child > .ju-process-step__label {
+  margin-right: var(--s2, 10px);
+}
+
+.ju-process-step__label {
+  margin: 0;
+  color: inherit;
+  font-size: var(--fs-s, 0.92rem);
+  font-weight: 800;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.ju-process-step__body.card,
+.ju-process-step > .card {
+  position: relative;
+  margin-top: var(--ju-step-body-mt) !important;
+  min-height: 212px;
+  padding: var(--s4, 18px);
+  border: 1px solid var(--line, #d7dee5);
+  border-top: 4px solid var(--ju-step-head);
+  border-radius: 16px;
+  background: var(--surface, #ffffff) !important;
+  color: var(--text2, #3c4a58) !important;
+  box-shadow: var(--shadow-sm, 0 6px 16px rgba(16, 25, 34, 0.08));
+  overflow: hidden;
+  transition: transform 0.16s ease, box-shadow 0.2s ease;
+}
+
+.ju-process-step__body.card::before,
+.ju-process-step > .card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(29, 53, 79, 0.06) 0%, rgba(29, 53, 79, 0) 42%);
+  pointer-events: none;
+}
+
+.ju-process-step__body.card > .wp-block-group__inner-container,
+.ju-process-step > .card > .wp-block-group__inner-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2, 10px);
+}
+
+.ju-process-step__body.card .muted,
+.ju-process-step > .card .muted {
+  margin: 0;
+  color: var(--text2, #3c4a58) !important;
+}
+
+@media (hover: hover) {
+  .ju-process-step:hover .ju-process-step__head,
+  .ju-process-step:hover > .ju-process-step__label,
+  .ju-process-step:hover .ju-process-step__body.card,
+  .ju-process-step:hover > .card {
+    transform: translateY(-2px);
+  }
+
+  .ju-process-step:hover .ju-process-step__head,
+  .ju-process-step:hover > .ju-process-step__label {
+    box-shadow: 0 12px 24px rgba(16, 25, 34, 0.17);
+  }
+
+  .ju-process-step:hover .ju-process-step__body.card,
+  .ju-process-step:hover > .card {
+    box-shadow: 0 12px 24px rgba(16, 25, 34, 0.12);
+  }
+}
+
+.ju-process-flow__steps::-webkit-scrollbar {
+  height: 8px;
+}
+
+.ju-process-flow__steps::-webkit-scrollbar-thumb {
+  background: rgba(29, 53, 79, 0.24);
+  border-radius: 999px;
+}
+
+@media (max-width: 1020px) {
+  .ju-process-flow__steps::before {
+    display: none;
+  }
+
+  .ju-process-flow__steps,
+  .ju-process-flow__steps > .wp-block-group__inner-container {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .ju-process-flow__steps > .ju-process-step,
+  .ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step {
+    min-width: 0;
+  }
+}

juconnect-patterns-plugin/juconnect-patterns/juconnect-patterns.php

@@ -2,11 +2,36 @@
 /**
  * Plugin Name: JuConnect Patterns
  * Description: Gutenberg Block Patterns fuer JuConnect (Styleguide-Klassen).
- * Version: 0.2
+ * Version: 0.3.0
  */
 
 if (!defined('ABSPATH')) exit;
 
+define('JUCONNECT_PATTERNS_VERSION', '0.3.0');
+
+function juconnect_patterns_enqueue_styles() {
+  $css_rel_path = 'assets/css/juconnect-patterns.css';
+  $css_abs_path = plugin_dir_path(__FILE__) . $css_rel_path;
+
+  if (!file_exists($css_abs_path)) {
+    return;
+  }
+
+  $css_ver = (string) filemtime($css_abs_path);
+  if ('' === $css_ver) {
+    $css_ver = JUCONNECT_PATTERNS_VERSION;
+  }
+
+  $deps = [];
+  if (wp_style_is('juconnect-style', 'registered') || wp_style_is('juconnect-style', 'enqueued')) {
+    $deps[] = 'juconnect-style';
+  }
+
+  wp_enqueue_style('juconnect-patterns', plugin_dir_url(__FILE__) . $css_rel_path, $deps, $css_ver);
+}
+add_action('wp_enqueue_scripts', 'juconnect_patterns_enqueue_styles', 20);
+add_action('enqueue_block_editor_assets', 'juconnect_patterns_enqueue_styles', 20);
+
 add_action('init', function () {
   if (!function_exists('register_block_pattern')) return;
 
@@ -605,6 +630,69 @@ HTML
 <!-- /wp:html --></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->
+HTML
+  ]);
+
+  register_block_pattern('juconnect/process-flow-flex', [
+    'title'       => __('Prozessablauf (flexibel, horizontal)', 'juconnect'),
+    'categories'  => ['juconnect'],
+    'description' => __('Flexibler Ablauf mit einzeln bearbeitbaren Schritten. Schritte einfach duplizieren, verschieben oder entfernen.', 'juconnect'),
+    'content'     => <<<HTML
+<!-- wp:group {"className":"section ju-process-flow"} -->
+<div class="wp-block-group section ju-process-flow"><!-- wp:group {"className":"section__head"} -->
+<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
+<h2 class="h2">So laeuft die Zusammenarbeit ab</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"className":"muted"} -->
+<p class="muted">Jeder Schritt ist ein einzelner Block und kann beliebig angepasst, dupliziert oder entfernt werden.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ju-process-flow__steps"} -->
+<div class="wp-block-group ju-process-flow__steps"><!-- wp:group {"className":"ju-process-step"} -->
+<div class="wp-block-group ju-process-step"><!-- wp:group {"className":"ju-process-step__head"} -->
+<div class="wp-block-group ju-process-step__head"><!-- wp:paragraph {"className":"ju-process-step__label"} -->
+<p class="ju-process-step__label">Anfrage</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ju-process-step__body card"} -->
+<div class="wp-block-group ju-process-step__body card"><!-- wp:paragraph {"className":"muted"} -->
+<p class="muted">Kontakt aufnehmen, Anlass schildern und den Rahmen fuer die Begleitung klaeren.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ju-process-step"} -->
+<div class="wp-block-group ju-process-step"><!-- wp:group {"className":"ju-process-step__head"} -->
+<div class="wp-block-group ju-process-step__head"><!-- wp:paragraph {"className":"ju-process-step__label"} -->
+<p class="ju-process-step__label">Abstimmung</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ju-process-step__body card"} -->
+<div class="wp-block-group ju-process-step__body card"><!-- wp:paragraph {"className":"muted"} -->
+<p class="muted">Ziele, Rollen und Kommunikationswege gemeinsam festlegen.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ju-process-step"} -->
+<div class="wp-block-group ju-process-step"><!-- wp:group {"className":"ju-process-step__head"} -->
+<div class="wp-block-group ju-process-step__head"><!-- wp:paragraph {"className":"ju-process-step__label"} -->
+<p class="ju-process-step__label">Umsetzung</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ju-process-step__body card"} -->
+<div class="wp-block-group ju-process-step__body card"><!-- wp:paragraph {"className":"muted"} -->
+<p class="muted">Begleitung starten, Fortschritt transparent dokumentieren und regelmaessig nachsteuern.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
 HTML
   ]);
 });

juconnect-strict-theme-v3/juconnect-strict/footer.php

@@ -4,7 +4,7 @@
       <div class="footer__inner">
         <nav class="footer__nav" aria-label="<?php esc_attr_e('Footer Navigation', 'juconnect'); ?>">
           <?php if (has_nav_menu('footer')): ?>
-            <div class="navgroup__title"><?php esc_html_e('Quick Links', 'juconnect'); ?></div>
+            <div class="navgroup__title"><?php esc_html_e('Weiterführende Links', 'juconnect'); ?></div>
           <?php endif; ?>
           <?php
             wp_nav_menu([
@@ -16,7 +16,7 @@
             ]);
           ?>
         </nav>
-        <span class="muted"><?php echo esc_html(get_bloginfo('name')); ?> - Theme v<?php echo esc_html(wp_get_theme()->get('Version')); ?></span>
+        <span class="muted">(c) 2026 JuConnect GbR</span>
       </div>
     </footer>
   </main>

juconnect-strict-theme-v3/juconnect-strict/functions.php

@@ -27,11 +27,262 @@ function juconnect_favicon_fallback() {
     return;
   }
 
-  $icon_url = get_template_directory_uri() . '/assets/img/juconnect_icon.svg';
+  $icon_light_mode = get_template_directory_uri() . '/assets/img/juconnect_icon.svg';
-  echo '<link rel="icon" href="' . esc_url($icon_url) . '" type="image/svg+xml" />' . "\n";
+  $icon_dark_mode  = get_template_directory_uri() . '/assets/img/juconnect_icon_light.svg';
+
+  // Use the light icon in dark browser UI and the default icon in light UI.
+  echo '<link rel="icon" href="' . esc_url($icon_light_mode) . '" media="(prefers-color-scheme: light)" type="image/svg+xml" />' . "\n";
+  echo '<link rel="icon" href="' . esc_url($icon_dark_mode) . '" media="(prefers-color-scheme: dark)" type="image/svg+xml" />' . "\n";
+  echo '<link rel="icon" href="' . esc_url($icon_light_mode) . '" type="image/svg+xml" />' . "\n";
 }
 add_action('wp_head', 'juconnect_favicon_fallback');
 
+/**
+ * Avoid duplicate SEO tags when a dedicated SEO plugin is active.
+ */
+function juconnect_has_external_seo_plugin() {
+  return (
+    class_exists('WPSEO_Frontend') || // Yoast SEO
+    defined('RANK_MATH_VERSION') ||   // Rank Math
+    defined('AIOSEO_VERSION') ||      // All in One SEO
+    defined('SEOPRESS_VERSION') ||    // SEOPress
+    defined('THE_SEO_FRAMEWORK_VERSION')
+  );
+}
+
+function juconnect_get_meta_description() {
+  $description = '';
+
+  if (is_front_page() || is_home()) {
+    $description = get_bloginfo('description', 'display');
+  } elseif (is_singular()) {
+    if (has_excerpt()) {
+      $description = get_the_excerpt();
+    } else {
+      $content = get_post_field('post_content', get_queried_object_id());
+      $description = wp_strip_all_tags(strip_shortcodes((string) $content));
+    }
+  } elseif (is_category() || is_tag() || is_tax()) {
+    $description = wp_strip_all_tags(term_description());
+  } elseif (is_post_type_archive()) {
+    $description = wp_strip_all_tags(get_the_archive_description());
+  }
+
+  if ($description === '') {
+    $description = get_bloginfo('description', 'display');
+  }
+
+  $description = preg_replace('/\s+/', ' ', trim((string) $description));
+  return wp_html_excerpt($description, 155, '...');
+}
+
+function juconnect_get_canonical_url() {
+  $paged = max(1, (int) get_query_var('paged'));
+
+  if (is_404()) {
+    return '';
+  }
+
+  if (is_singular()) {
+    if (function_exists('wp_get_canonical_url')) {
+      $canonical = wp_get_canonical_url();
+      if ($canonical) {
+        return $canonical;
+      }
+    }
+    return get_permalink();
+  }
+
+  if (is_front_page()) {
+    if ($paged > 1) {
+      return get_pagenum_link($paged);
+    }
+    return home_url('/');
+  }
+
+  if (is_home()) {
+    if ($paged > 1) {
+      return get_pagenum_link($paged);
+    }
+    $posts_page_id = (int) get_option('page_for_posts');
+    if ($posts_page_id > 0) {
+      return get_permalink($posts_page_id);
+    }
+  }
+
+  return get_pagenum_link($paged);
+}
+
+function juconnect_get_social_image_url() {
+  if (is_singular() && has_post_thumbnail()) {
+    $image = wp_get_attachment_image_url(get_post_thumbnail_id(), 'full');
+    if ($image) {
+      return $image;
+    }
+  }
+
+  if (has_site_icon()) {
+    $site_icon = get_site_icon_url(512);
+    if ($site_icon) {
+      return $site_icon;
+    }
+  }
+
+  return get_template_directory_uri() . '/assets/img/juconnect_icon.svg';
+}
+
+function juconnect_output_seo_meta() {
+  if (juconnect_has_external_seo_plugin() || is_feed()) {
+    return;
+  }
+
+  $title = wp_get_document_title();
+  $description = juconnect_get_meta_description();
+  $canonical = juconnect_get_canonical_url();
+  $site_name = get_bloginfo('name', 'display');
+  $locale = str_replace('-', '_', get_locale());
+  $og_type = is_singular('post') ? 'article' : 'website';
+  $social_image = juconnect_get_social_image_url();
+
+  if ($description !== '') {
+    echo '<meta name="description" content="' . esc_attr($description) . '" />' . "\n";
+  }
+
+  // Core prints singular canonicals already via rel_canonical.
+  if (!is_singular() && $canonical !== '') {
+    echo '<link rel="canonical" href="' . esc_url($canonical) . '" />' . "\n";
+  }
+
+  echo '<meta property="og:locale" content="' . esc_attr($locale) . '" />' . "\n";
+  echo '<meta property="og:type" content="' . esc_attr($og_type) . '" />' . "\n";
+  echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
+  if ($description !== '') {
+    echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
+  }
+  if ($canonical !== '') {
+    echo '<meta property="og:url" content="' . esc_url($canonical) . '" />' . "\n";
+  }
+  echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
+  if ($social_image !== '') {
+    echo '<meta property="og:image" content="' . esc_url($social_image) . '" />' . "\n";
+  }
+
+  echo '<meta name="twitter:card" content="' . esc_attr($social_image !== '' ? 'summary_large_image' : 'summary') . '" />' . "\n";
+  echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . "\n";
+  if ($description !== '') {
+    echo '<meta name="twitter:description" content="' . esc_attr($description) . '" />' . "\n";
+  }
+  if ($social_image !== '') {
+    echo '<meta name="twitter:image" content="' . esc_url($social_image) . '" />' . "\n";
+  }
+}
+add_action('wp_head', 'juconnect_output_seo_meta', 5);
+
+function juconnect_robots_directives($robots) {
+  if (juconnect_has_external_seo_plugin()) {
+    return $robots;
+  }
+
+  if (get_option('blog_public') === '0') {
+    return [
+      'noindex' => true,
+      'nofollow' => true,
+    ];
+  }
+
+  if (is_search() || is_404() || is_attachment()) {
+    unset($robots['index']);
+    $robots['noindex'] = true;
+  }
+
+  return $robots;
+}
+add_filter('wp_robots', 'juconnect_robots_directives');
+
+function juconnect_output_json_ld() {
+  if (juconnect_has_external_seo_plugin() || is_feed()) {
+    return;
+  }
+
+  $home_url = home_url('/');
+  $site_name = get_bloginfo('name', 'display');
+  $site_logo = '';
+  $custom_logo_id = (int) get_theme_mod('custom_logo');
+  if ($custom_logo_id > 0) {
+    $site_logo = wp_get_attachment_image_url($custom_logo_id, 'full');
+  } elseif (has_site_icon()) {
+    $site_logo = get_site_icon_url(512);
+  }
+
+  $schema_graph = [];
+  $organization = [
+    '@type' => 'Organization',
+    '@id' => $home_url . '#organization',
+    'name' => $site_name,
+    'url' => $home_url,
+  ];
+  if ($site_logo) {
+    $organization['logo'] = $site_logo;
+  }
+  $schema_graph[] = $organization;
+
+  $website = [
+    '@type' => 'WebSite',
+    '@id' => $home_url . '#website',
+    'url' => $home_url,
+    'name' => $site_name,
+    'publisher' => ['@id' => $home_url . '#organization'],
+    'potentialAction' => [
+      '@type' => 'SearchAction',
+      'target' => home_url('/?s={search_term_string}'),
+      'query-input' => 'required name=search_term_string',
+    ],
+  ];
+  $schema_graph[] = $website;
+
+  if (is_singular()) {
+    $canonical = juconnect_get_canonical_url();
+    $webpage = [
+      '@type' => 'WebPage',
+      '@id' => $canonical . '#webpage',
+      'url' => $canonical,
+      'name' => single_post_title('', false),
+      'isPartOf' => ['@id' => $home_url . '#website'],
+      'description' => juconnect_get_meta_description(),
+    ];
+    $schema_graph[] = $webpage;
+
+    if (is_singular('post')) {
+      $article = [
+        '@type' => 'Article',
+        '@id' => $canonical . '#article',
+        'mainEntityOfPage' => ['@id' => $canonical . '#webpage'],
+        'headline' => single_post_title('', false),
+        'datePublished' => get_post_time(DATE_W3C, true),
+        'dateModified' => get_post_modified_time(DATE_W3C, true),
+        'author' => [
+          '@type' => 'Person',
+          'name' => get_the_author_meta('display_name', (int) get_post_field('post_author', get_queried_object_id())),
+        ],
+        'publisher' => ['@id' => $home_url . '#organization'],
+      ];
+      $image = juconnect_get_social_image_url();
+      if ($image) {
+        $article['image'] = [$image];
+      }
+      $schema_graph[] = $article;
+    }
+  }
+
+  $json_ld = [
+    '@context' => 'https://schema.org',
+    '@graph' => $schema_graph,
+  ];
+
+  echo '<script type="application/ld+json">' . wp_json_encode($json_ld, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) . '</script>' . "\n";
+}
+add_action('wp_head', 'juconnect_output_json_ld', 6);
+
 function juconnect_assets() {
   $theme_ver = wp_get_theme()->get('Version');
   $style_ver = filemtime(get_stylesheet_directory() . '/style.css');

juconnect-strict-theme-v3/juconnect-strict/style.css

@@ -655,8 +655,9 @@ a{ color: inherit; }
   background: var(--surface2);
   padding: var(--s4);
 }
-.callout__title{ font-weight: 800; margin-bottom: 4px; }
+.callout__title{ font-weight: 800; margin: 0 0 6px 0; }
-.callout__text{ color: var(--text2); }
+.callout__text{ color: var(--text2); margin: 0; }
+.kpi + .callout{ margin-top: var(--s2); }
 .callout--info{ border-color: rgba(43,108,176,.28); background: rgba(43,108,176,.08); }
 .callout--accent{ border-color: rgba(143,174,154,.35); background: rgba(143,174,154,.10); }
 
@@ -1126,6 +1127,8 @@ a{ color: inherit; }
 
 /* Groups: don't add unexpected margins that break cards/grids */
 .wp-block-group:not(.section){ margin: 0; }
+/* Keep visual breathing room between KPI rows and following callout blocks. */
+.wp-block-group.kpi + .wp-block-group.callout{ margin-top: var(--s2); }
 
 /* Images: prevent WP default inline styles from breaking rounded cards */
 .wp-block-image img{ max-width: 100%; height: auto; }
@@ -1255,3 +1258,226 @@ a{ color: inherit; }
   max-width: 560px;
   margin-inline: auto;
 }
+
+/* =========================
+   Process Flow (fallback in theme)
+   ========================= */
+.ju-process-flow {
+  --ju-flow-gap: var(--s4, 18px);
+  --ju-step-stack-gap: var(--s4, 18px);
+  --ju-step-body-mt: var(--s2, 10px);
+}
+
+.ju-process-flow__steps,
+.ju-process-flow__steps > .wp-block-group__inner-container {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(260px, 1fr);
+  gap: var(--ju-flow-gap);
+  align-items: start;
+  counter-reset: ju-flow-step;
+}
+
+.ju-process-flow__steps {
+  position: relative;
+  overflow-x: auto;
+  padding: 2px calc(var(--s6, 32px) + 6px) var(--s3, 14px) 2px;
+}
+
+.ju-process-flow__steps::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 30px;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(29, 53, 79, 0.12) 0%, rgba(29, 53, 79, 0.3) 50%, rgba(29, 53, 79, 0.12) 100%);
+  pointer-events: none;
+}
+
+.ju-process-flow__steps > .wp-block-group__inner-container {
+  width: max(100%, max-content);
+  min-width: 100%;
+  max-width: none !important;
+  margin: 0 !important;
+}
+
+.ju-process-flow__steps > .ju-process-step,
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step {
+  counter-increment: ju-flow-step;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: var(--ju-step-stack-gap);
+  min-width: 260px;
+  max-width: none;
+  --ju-step-head: var(--primary, #1d354f);
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(2),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(2) {
+  --ju-step-head: #255683;
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(3),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(3) {
+  --ju-step-head: #2b6cb0;
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(4),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(4) {
+  --ju-step-head: #235e9a;
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(5),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(5) {
+  --ju-step-head: #1f4d7e;
+}
+
+.ju-process-flow__steps > .ju-process-step:nth-child(6),
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(6) {
+  --ju-step-head: #183d64;
+}
+
+.ju-process-step__head,
+.ju-process-step > .ju-process-step__label {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  padding: 11px 72px 11px 16px;
+  border: 1px solid rgba(16, 25, 34, 0.16);
+  border-radius: 12px;
+  color: #ffffff !important;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
+    var(--ju-step-head) !important;
+  box-shadow: 0 10px 22px rgba(16, 25, 34, 0.14);
+  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 12px 50%);
+  transition: transform 0.16s ease, box-shadow 0.2s ease;
+}
+
+.ju-process-step__head > .wp-block-group__inner-container {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+}
+
+.ju-process-step__head::after,
+.ju-process-step > .ju-process-step__label::after {
+  content: counter(ju-flow-step, decimal-leading-zero);
+  position: absolute;
+  right: 26px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1.65rem;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  color: rgba(255, 255, 255, 0.94);
+  font-variant-numeric: tabular-nums;
+}
+
+.ju-process-flow__steps > .ju-process-step:last-child .ju-process-step__head,
+.ju-process-flow__steps > .ju-process-step:last-child > .ju-process-step__label,
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child .ju-process-step__head,
+.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child > .ju-process-step__label {
+  margin-right: var(--s2, 10px);
+}
+
+.ju-process-step__label {
+  margin: 0;
+  color: inherit;
+  font-size: var(--fs-s, 0.92rem);
+  font-weight: 800;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.ju-process-step__body.card,
+.ju-process-step > .card {
+  position: relative;
+  margin-top: var(--ju-step-body-mt) !important;
+  min-height: 212px;
+  padding: var(--s4, 18px);
+  border: 1px solid var(--line, #d7dee5);
+  border-top: 4px solid var(--ju-step-head);
+  border-radius: 16px;
+  background: var(--surface, #ffffff) !important;
+  color: var(--text2, #3c4a58) !important;
+  box-shadow: var(--shadow-sm, 0 6px 16px rgba(16, 25, 34, 0.08));
+  overflow: hidden;
+  transition: transform 0.16s ease, box-shadow 0.2s ease;
+}
+
+.ju-process-step__body.card::before,
+.ju-process-step > .card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(29, 53, 79, 0.06) 0%, rgba(29, 53, 79, 0) 42%);
+  pointer-events: none;
+}
+
+.ju-process-step__body.card > .wp-block-group__inner-container,
+.ju-process-step > .card > .wp-block-group__inner-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2, 10px);
+}
+
+.ju-process-step__body.card .muted,
+.ju-process-step > .card .muted {
+  margin: 0;
+  color: var(--text2, #3c4a58) !important;
+}
+
+@media (hover: hover) {
+  .ju-process-step:hover .ju-process-step__head,
+  .ju-process-step:hover > .ju-process-step__label,
+  .ju-process-step:hover .ju-process-step__body.card,
+  .ju-process-step:hover > .card {
+    transform: translateY(-2px);
+  }
+
+  .ju-process-step:hover .ju-process-step__head,
+  .ju-process-step:hover > .ju-process-step__label {
+    box-shadow: 0 12px 24px rgba(16, 25, 34, 0.17);
+  }
+
+  .ju-process-step:hover .ju-process-step__body.card,
+  .ju-process-step:hover > .card {
+    box-shadow: 0 12px 24px rgba(16, 25, 34, 0.12);
+  }
+}
+
+.ju-process-flow__steps::-webkit-scrollbar {
+  height: 8px;
+}
+
+.ju-process-flow__steps::-webkit-scrollbar-thumb {
+  background: rgba(29, 53, 79, 0.24);
+  border-radius: 999px;
+}
+
+@media (max-width: 1020px) {
+  .ju-process-flow__steps::before {
+    display: none;
+  }
+
+  .ju-process-flow__steps,
+  .ju-process-flow__steps > .wp-block-group__inner-container {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .ju-process-flow__steps > .ju-process-step,
+  .ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step {
+    min-width: 0;
+  }
+}