/*
Theme Name: Junge MIT Theme
Theme URI: https://jumit.de
Author: Junge Mittelstandsunion
Author URI: https://jumit.de
Description: Elementor-kompatibles WordPress-Theme für die Junge Mittelstandsunion (juMIT). One-Page-Layout mit bearbeitbarem Hauptmenü, Header-Buttons, Logo und Footer-Menüs. Erfordert das Elementor-Plugin für den Seiteninhalt.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jumit
Tags: one-page, elementor, business, custom-logo, custom-menu, footer-widgets
*/

/* ============================================================
   juMIT — Design Tokens
   ============================================================ */

@font-face {
  font-family: "Kievit Compressed";
  src: url("assets/fonts/CDUKievitComp-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand: Red */
  --jumit-red-50:  #FEF4F4;
  --jumit-red-100: #FBE0E1;
  --jumit-red-200: #F6B9BC;
  --jumit-red-300: #EF8088;
  --jumit-red-400: #ED3742;
  --jumit-red-500: #E6040F;
  --jumit-red-600: #C8040D;
  --jumit-red-700: #A2030B;
  --jumit-red-800: #7C0308;

  /* Brand: Black */
  --jumit-black: #141412;
  --jumit-ink:   #1E1E1B;

  /* Brand: Gold */
  --jumit-gold-100: #FBF1CE;
  --jumit-gold-300: #F0DC83;
  --jumit-gold-500: #E7C422;
  --jumit-gold-600: #C2A20F;

  /* Warm-neutral grays */
  --gray-0:   #FFFFFF;
  --gray-50:  #F8F8F6;
  --gray-100: #F0F0ED;
  --gray-200: #E4E3DF;
  --gray-300: #D2D1CB;
  --gray-400: #ADACA4;
  --gray-500: #82817A;
  --gray-600: #5C5B54;
  --gray-700: #403F39;
  --gray-800: #2A2A25;
  --gray-900: #1A1A16;

  /* Status */
  --color-success:    #1F8A4C;
  --color-success-bg: #E7F4EC;
  --color-warning:    #C2A20F;
  --color-warning-bg: #FBF1CE;
  --color-danger:     #C8040D;
  --color-danger-bg:  #FBE0E1;

  /* Semantic */
  --color-primary:        var(--jumit-red-500);
  --color-primary-hover:  var(--jumit-red-600);
  --color-primary-active: var(--jumit-red-700);
  --color-on-primary:     #FFFFFF;
  --color-primary-soft:   var(--jumit-red-50);
  --color-accent:         var(--jumit-gold-500);
  --color-accent-soft:    var(--jumit-gold-100);

  --text-strong:   var(--jumit-black);
  --text-body:     var(--gray-800);
  --text-muted:    var(--gray-500);
  --text-on-dark:  #FFFFFF;
  --text-link:     var(--jumit-red-600);

  --surface-page:    #FFFFFF;
  --surface-card:    #FFFFFF;
  --surface-sunken:  var(--gray-50);
  --surface-inverse: var(--jumit-black);
  --surface-accent:  var(--jumit-red-500);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);

  --focus-ring: color-mix(in srgb, var(--jumit-red-500) 55%, transparent);

  /* Typography */
  --font-display: "Kievit Compressed", "Fira Sans Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radii */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(20,20,18,.08), 0 1px 2px rgba(20,20,18,.04);
  --shadow-md: 0 4px 12px rgba(20,20,18,.08), 0 2px 4px rgba(20,20,18,.05);
  --shadow-lg: 0 12px 28px rgba(20,20,18,.12), 0 4px 8px rgba(20,20,18,.06);

  /* Layout */
  --container-max: 1200px;
  --gutter: var(--space-6);

  /* Motion */
  --ease-standard: cubic-bezier(.2,0,0,1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* ============================================================
   Base / Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--text-link); }
a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); text-transform: uppercase; color: var(--jumit-black); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ============================================================
   Layout Utilities
   ============================================================ */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

#page { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 1 auto; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -9999px;
  left: var(--space-4);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 700;
  z-index: 999;
}
.skip-link:focus { top: var(--space-4); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Logo */
.site-header__logo {
  flex-shrink: 0;
}
.site-header__logo a,
.site-header__logo .custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__logo img,
.site-header__logo .custom-logo {
  height: 38px;
  width: auto;
}

.site-header__logo-text {
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}
.site-header__logo-text .ju { color: var(--jumit-black); }
.site-header__logo-text .mit { color: var(--color-primary); font-style: italic; }

/* Primary nav */
.site-header__nav { margin-left: var(--space-4); }

.nav-menu {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  display: block;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}

.nav-menu a:hover,
.nav-menu li:hover > a {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu .current-page-ancestor > a {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Header actions */
.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.site-header__login {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.site-header__login:hover { color: var(--color-primary); }

/* Mobile toggle */
.site-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-body);
  border-radius: var(--radius-sm);
  margin-left: auto;
}
.site-header__menu-toggle:hover { background: var(--gray-100); }

/* ============================================================
   Buttons
   ============================================================ */

.jumit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.jumit-btn:active { transform: translateY(1px); }
.jumit-btn svg { flex-shrink: 0; }

/* Sizes */
.jumit-btn-sm  { padding: 7px 14px; font-size: 14px; }
.jumit-btn-md  { padding: 10px 20px; font-size: 15px; }
.jumit-btn-lg  { padding: 13px 26px; font-size: 16px; }

/* Primary */
.jumit-btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 20px;
  font-size: 15px;
}
.jumit-btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.jumit-btn-primary:active { background: var(--color-primary-active); }

/* Outline */
.jumit-btn-outline {
  background: transparent;
  color: var(--text-strong);
  border: 1.5px solid var(--border-default);
  padding: 9px 20px;
  font-size: 15px;
}
.jumit-btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--border-strong);
  color: var(--text-strong);
}

/* Ghost */
.jumit-btn-ghost {
  background: transparent;
  color: var(--color-primary);
  padding: 10px 16px;
  font-size: 15px;
}
.jumit-btn-ghost:hover { background: var(--color-primary-soft); }

/* ============================================================
   Shared display + eyebrow classes (used in Elementor HTML widgets)
   ============================================================ */

.jumit-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.jumit-display {
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* ============================================================
   Elementor Heading token classes
   Add as _css_classes on any heading widget to get consistent
   typography without touching Elementor style settings.
   Color stays in Elementor's "title_color" so non-tech users
   can change it via the color picker.
   ============================================================ */

/* Eyebrow label row (12 px, all-caps, tracked) */
.jumit-eyebrow .elementor-heading-title {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* Hero display lines — three stacked, tight leading */
.jumit-h-hero .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 8vw, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  text-transform: uppercase !important;
}
/* Pull consecutive hero heading widgets together */
.jumit-h-hero ~ .jumit-h-hero {
  margin-top: -10px !important;
}

/* Section h2 — fluid: ~32 px mobile → 52 px desktop */
.jumit-h-section .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 7.5vw, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

/* "Wie wir arbeiten" step title — fluid: ~24 px mobile → 36 px desktop */
.jumit-h-step .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 5.5vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

/* Mitmachen mega-heading — fluid: ~43 px mobile → 72 px desktop */
.jumit-h-mitmachen .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: clamp(40px, 11vw, 72px) !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  text-transform: uppercase !important;
}

/* Badges */
.jumit-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
}
.jumit-badge-red  { background: var(--jumit-red-50); color: var(--jumit-red-700); }
.jumit-badge-gold { background: var(--jumit-gold-100); color: var(--jumit-black); }
.jumit-badge-solid-red  { background: var(--color-primary); color: #fff; }
.jumit-badge-solid-gold { background: var(--jumit-gold-500); color: var(--jumit-black); }

/* ============================================================
   Hero — native-widget helpers
   ============================================================ */

.jumit-badge-wrap {
  margin-bottom: 16px;
}

/* Hero image shadow — _element_id="hero-image" is the most reliable hook */
#hero-image img,
#hero-image .elementor-image img,
.jumit-hero-image-col img,
.jumit-hero-image-widget img {
  border-radius: var(--radius-lg);
  box-shadow: 24px 24px 0 0 #E6040F;
  display: block;
  width: 100%;
  height: auto;
}

.jumit-btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ============================================================
   Stat Band (dark strip — four Elementor columns)
   ============================================================ */

/* Dividers via section _element_id="stat-band" — avoids relying on column _css_classes */
#stat-band .elementor-column + .elementor-column {
  border-left: 1px solid rgba(255,255,255,0.2) !important;
}
#stat-band .elementor-column + .elementor-column .elementor-widget-wrap,
#stat-band .elementor-column + .elementor-column .elementor-column-wrap {
  padding-left: var(--space-6) !important;
}
/* Fallback: class-based selector kept in case _css_classes works on import */
.jumit-stat-col + .jumit-stat-col {
  border-left: 1px solid rgba(255,255,255,.2);
  padding-left: var(--space-6) !important;
}

.jumit-stat-value {
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 0.9;
  font-style: italic;
  text-transform: uppercase;
  color: var(--jumit-gold-500);
}
/* Elementor heading widget variant — color stays in title_color */
.jumit-stat-value .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: clamp(42px, 10vw, 60px) !important;
  line-height: 0.9 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

.jumit-stat-label {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
/* Elementor heading widget variant */
.jumit-stat-label .elementor-heading-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-top: 6px;
}

.jumit-stat-sub {
  margin-top: 2px;
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
}

/* ============================================================
   Icon-box cards (Elementor icon-box widget + jumit-icon-card class)
   ============================================================ */

.jumit-inner-cards { margin-top: 48px; }

.jumit-icon-card .elementor-icon-box-wrapper {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
  height: 100%;
}
.jumit-icon-card:hover .elementor-icon-box-wrapper {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.jumit-icon-card .elementor-icon-box-title,
.jumit-icon-card .elementor-icon-box-title a {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--jumit-black) !important;  /* override Elementor inline styles */
  font-size: 22px;
}
.jumit-icon-card .elementor-icon-box-description {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-body);
  margin-top: 8px;
}
.jumit-icon-card--black .elementor-icon-box-wrapper { border-top-color: var(--jumit-black); }
.jumit-icon-card--gold  .elementor-icon-box-wrapper { border-top-color: var(--jumit-gold-500); }

/* Icon overrides — solid brand colors beat Elementor inline styles at any specificity */
.jumit-icon-card .elementor-icon {
  background-color: #E6040F !important;
  border-radius: 8px !important;
  opacity: 1 !important;
}
.jumit-icon-card .elementor-icon i,
.jumit-icon-card .elementor-icon svg,
.jumit-icon-card .elementor-icon svg *,
.jumit-icon-card .elementor-icon-box-icon i {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  opacity: 1 !important;
}
.jumit-icon-card--black .elementor-icon {
  background-color: #141412 !important;
}
.jumit-icon-card--black .elementor-icon i,
.jumit-icon-card--black .elementor-icon svg,
.jumit-icon-card--black .elementor-icon svg *,
.jumit-icon-card--black .elementor-icon-box-icon i {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}
.jumit-icon-card--gold .elementor-icon {
  background-color: #E7C422 !important;
}
.jumit-icon-card--gold .elementor-icon i,
.jumit-icon-card--gold .elementor-icon svg,
.jumit-icon-card--gold .elementor-icon svg *,
.jumit-icon-card--gold .elementor-icon-box-icon i {
  color: #141412 !important;
  fill: #141412 !important;
}

/* ============================================================
   "Wie wir arbeiten" — numbered 01/02/03 step sequence
   ============================================================ */

/* Step number: large display figure in the accent color */
.jumit-step-number .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: 52px !important;
  line-height: 1 !important;
  font-weight: 700;
  text-transform: uppercase;
  /* color comes from title_color in widget settings */
}

/* Keep any remaining icon-box usage in this section clean (fallback) */
.jumit-work-item .elementor-icon-box-wrapper { padding: 0; background: none; border: none; box-shadow: none; }
.jumit-work-item .elementor-icon { background: transparent !important; }
.jumit-work-item .elementor-icon i { color: #141412 !important; }
.jumit-work-item--red .elementor-icon i  { color: #E6040F !important; }
.jumit-work-item--gold .elementor-icon i { color: #D4A800 !important; }

/* Legacy .jumit-card classes (used in Events/Mitmachen HTML widgets) */
.jumit-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.jumit-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.jumit-card--accent-top {
  border-top: 4px solid var(--color-primary);
}

.jumit-card__icon {
  width: 52px;
  height: 52px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.jumit-card h4 {
  margin: 12px 0 8px;
  font-size: 22px;
}

/* ============================================================
   "Warum" — stat card (HTML widget, class-only styling)
   ============================================================ */

.jumit-zahlenkarte {
  background: #fff;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.jumit-zahlenkarte__item {
  padding: 20px 0;
  border-top: 1px solid var(--border-subtle);
}
.jumit-zahlenkarte__item:first-of-type { padding-top: 0; border-top: none; }
.jumit-zahlenkarte__num {
  font-family: var(--font-display);
  font-size: 42px;
  text-transform: uppercase;
  line-height: 1;
}
.jumit-zahlenkarte__num--red   { color: var(--color-primary); }
.jumit-zahlenkarte__num--black { color: var(--jumit-black); }
.jumit-zahlenkarte__num--gold  { color: var(--jumit-gold-500); }
.jumit-zahlenkarte__sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.jumit-eyebrow--spaced { margin-bottom: 24px; }

/* ============================================================
   CSS-only checklist (Text Editor widget, no SVG markup needed)
   ============================================================ */

.jumit-checklist {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jumit-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}
.jumit-checklist li::before {
  content: '';
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6040F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ============================================================
   Event items (individual HTML widgets — edit date/name/time)
   ============================================================ */

.jumit-event-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}
.jumit-event-item + .jumit-event-item { margin-top: 12px; }
.jumit-event-item--black { border-left-color: var(--jumit-black); }
.jumit-event-date { text-align: center; min-width: 52px; flex-shrink: 0; }
.jumit-event-day {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--color-primary);
  text-transform: uppercase;
}
.jumit-event-item--black .jumit-event-day { color: var(--jumit-black); }
.jumit-event-month {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.jumit-event-info { flex: 1; }
.jumit-event-name { font-weight: 700; font-size: 16px; color: var(--text-strong); }
.jumit-event-meta { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   Join / Membership card (HTML widget — right column)
   ============================================================ */

.jumit-join-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 40px;
}

.jumit-join-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jumit-join-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-strong);
}

/* Form inputs inside the join card */
.jumit-join-card label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 6px;
}
.jumit-join-card input[type="text"],
.jumit-join-card input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font-body);
  background: #fff;
  color: var(--text-body);
  outline: none;
  transition: border-color var(--duration-fast);
  box-sizing: border-box;
}
.jumit-join-card input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.jumit-join-card .jumit-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.jumit-join-card .jumit-form-field { margin-bottom: 16px; }
.jumit-join-card .jumit-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.jumit-join-card .jumit-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.jumit-join-card .jumit-checkbox-row label {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.45;
  margin-bottom: 0;
  font-weight: 400;
}

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

.site-footer {
  background: var(--jumit-black);
  color: rgba(255,255,255,.7);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-7);
  padding: var(--space-8) 0 var(--space-6);
}

.site-footer__logo {
  height: 40px;
  width: auto;
}

.site-footer__logo-text {
  font-family: var(--font-display);
  font-size: 32px;
  font-style: italic;
  line-height: 1;
  color: #fff;
  text-transform: none;
}
.site-footer__logo-text .ju,
.site-footer__logo-text span:first-child {
  font-weight: 400;
  color: rgba(255,255,255,.85);
  text-transform: lowercase;
}
.site-footer__logo-text .mit,
.site-footer__logo-text span:last-child {
  font-weight: 700;
  color: var(--jumit-red-500);
  text-transform: uppercase;
}

/* Footer wordmark: Swoosh + juMIT text side by side */
.site-footer__wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
}
.site-footer__swoosh {
  width: 34px;
  height: auto;
  flex-shrink: 0;
  opacity: 0.85;
  filter: brightness(0) invert(1);
}
/* Process arrows: → desktop, ↓ mobile */
.jumit-process-arrow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  font-size: 26px;
  color: var(--gray-400);
  font-weight: 300;
}
.jumit-process-arrow__h { display: block; }
.jumit-process-arrow__v { display: none; }

.site-footer__tagline {
  margin-top: var(--space-4);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  max-width: 260px;
}

.site-footer__social {
  display: flex;
  gap: 10px;
  margin-top: var(--space-5);
}

.site-footer__social-link {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.8);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.site-footer__social-link:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

.site-footer__col-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
}

.site-footer__menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__menu a {
  font-size: 14.5px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.site-footer__menu a:hover { color: #fff; }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
}

.site-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__legal-menu {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__legal-menu a {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  text-decoration: none;
}
.site-footer__legal-menu a:hover { color: rgba(255,255,255,.8); }

/* ============================================================
   Elementor overrides — ensure clean canvas inside content area
   ============================================================ */

/* Prevent any Elementor section from causing horizontal scroll */
#page { overflow-x: clip; }

.site-main .elementor-section,
.site-main .e-con {
  margin-bottom: 0 !important;
}

/* Give section anchors proper offset for sticky header */
[id] { scroll-margin-top: 80px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
  .jumit-hero-image-col { display: none; }

  /* Stat band: 2×2 grid — only right column (even) gets divider */
  #stat-band .elementor-column { width: 50%; }
  #stat-band .elementor-column + .elementor-column { border-left: none !important; }
  #stat-band .elementor-column + .elementor-column .elementor-widget-wrap,
  #stat-band .elementor-column + .elementor-column .elementor-column-wrap { padding-left: 0 !important; }
  #stat-band .elementor-column:nth-child(2n) { border-left: 1px solid rgba(255,255,255,.2) !important; }
  #stat-band .elementor-column:nth-child(2n) .elementor-widget-wrap,
  #stat-band .elementor-column:nth-child(2n) .elementor-column-wrap { padding-left: var(--space-6) !important; }

  .jumit-inner-cards .elementor-column { width: 50%; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .site-header__nav { display: none; }
  .site-header__actions .site-header__login { display: none; }
  .site-header__menu-toggle { display: flex; }

  .site-header__nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-md);
    z-index: 99;
  }
  .site-header__nav.is-open .nav-menu { flex-direction: column; width: 100%; }
  .site-header__nav.is-open .nav-menu a { padding: 12px 16px; font-size: 16px; }

  /* Stat band stays 2×2 on mobile */
  #stat-band .elementor-column { width: 50%; }

  .jumit-inner-cards .elementor-column { width: 100%; }

  /* Arbeiten process arrows: switch to ↓ on mobile */
  .jumit-process-arrow { padding-top: 0; padding: 4px 0; }
  .jumit-process-arrow__h { display: none; }
  .jumit-process-arrow__v { display: block; }

  /* Footer: single column on mobile */
  .site-footer__grid { grid-template-columns: 1fr; }

  .jumit-join-card .jumit-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .site-footer__bottom-inner { flex-direction: column; text-align: center; }
}