/* ============================================================================
   Wilhelmswerk — Markendesign
   Abgeleitet aus dem Entwurf „Vorlage" (IBM Plex), Canvas-Export 2026-08-31.
   Alle Werte stammen aus dem Entwurf; nichts hier ist frei erfunden.

   Einbinden:   <link rel="stylesheet" href="/pfad/wilhelmswerk.css">
                (fonts/ muss relativ neben der CSS-Datei liegen)
   Präfix:      alle Tokens und Klassen tragen --ww- bzw. .ww-, damit das Kit
                sich in bestehende Projekte legen lässt, ohne zu kollidieren.
   Schriften:   IBM Plex Sans + Mono, lokal ausgeliefert (SIL OFL 1.1,
                fonts/OFL.txt). Bewusst KEIN Google-Fonts-CDN — der externe
                Abruf ist bei deutschen Auftraggebern das DSGVO-Standardrisiko.
   Nicht drin:  Dark Mode. Die Marke ist hell angelegt; ein zweites Token-Set
                käme dazu, wenn ein Projekt es braucht.
   ============================================================================ */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexSans-var-latin.056e4e24.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexSans-var-latin-ext.ae1d854f.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexSans-var-latin.056e4e24.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexSans-var-latin-ext.ae1d854f.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/IBMPlexSans-var-latin.056e4e24.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/IBMPlexSans-var-latin-ext.ae1d854f.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-latin.c36f509c.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-latin-ext.f1050dc5.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500-latin.a76f53ca.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500-latin-ext.77f03e26.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- Tokens -- */

:root {
  /* Text */
  --ww-ink:           #141a20;  /* Überschriften, harter Text */
  --ww-ink-soft:      #46545f;  /* Fließtext in Absätzen */
  --ww-ink-muted:     #66727d;  /* Beschreibungen in Karten */
  --ww-ink-faint:     #7d8b98;  /* Mono-Metazeilen, Bildunterschriften */
  --ww-label:         #5d7186;  /* Mono-Eyebrow über Abschnitten */

  /* Logofarben — gemessen aus logo/logo.svg, nicht verändern */
  --ww-navy:          #00235D;  /* Balken des W */
  --ww-teal:          #00BEA0;  /* Dreieck des W */

  /* Marke */
  --ww-brand:         #2b3a4a;  /* Buttons, Footer, dunkle Flächen */
  --ww-brand-hover:   #16222e;
  --ww-brand-deep:    #0f1a24;  /* Terminal-Kachel */
  --ww-brand-on:      #ffffff;  /* Text auf --ww-brand */
  --ww-brand-quiet:   #a9b9c7;  /* zweite Textebene auf --ww-brand */

  /* Flächen */
  --ww-ground:        #fbfcfd;  /* Seitengrund */
  --ww-surface:       #ffffff;  /* Karten, Bänder */
  --ww-sky-1:         #d8e9f4;  /* Kopfverlauf, oben */
  --ww-sky-2:         #e8f2f8;  /* Kopfverlauf, Mitte */
  --ww-hatch-1:       #eef3f7;  /* Bildplatzhalter, Schraffur hell */
  --ww-hatch-2:       #e5ecf1;  /* Bildplatzhalter, Schraffur dunkel */

  /* Linien */
  --ww-line:          #e3e8ec;  /* Trennlinien, Kartenrahmen */
  --ww-line-strong:   #d5dde4;  /* Formularrahmen */
  --ww-line-underline:#a9c1d3;  /* stille Links */

  /* Zustände */
  --ww-link-hover:    oklch(0.42 0.1 235);
  --ww-focus:         #2b6ea8;

  /* Terminal-Kachel */
  --ww-term-ink:      #9fb6c9;
  --ww-term-bright:   #e6eef5;
  --ww-term-dim:      #5d7186;

  /* Schriftfamilien */
  --ww-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ww-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Schriftgrößen — h1/h2 skalieren mit, der Rest ist fest */
  --ww-text-micro:    12px;
  --ww-text-label:    12.5px;
  --ww-text-caption:  14px;
  --ww-text-small:    15px;
  --ww-text-body:     16px;
  --ww-text-body-lg:  17px;
  --ww-text-lead:     19px;
  --ww-text-stat:     22px;
  --ww-text-h3:       19px;
  --ww-text-h2:       clamp(26px, 3.4vw, 34px);
  --ww-text-h1:       clamp(34px, 5.2vw, 54px);

  /* Zeilen und Laufweiten */
  --ww-leading-tight: 1.08;
  --ww-leading-snug:  1.2;
  --ww-leading-body:  1.65;
  --ww-leading-loose: 1.9;
  --ww-track-h1:      -0.032em;
  --ww-track-h2:      -0.025em;
  --ww-track-h3:      -0.01em;
  --ww-track-label:   0.06em;

  /* Maße */
  --ww-container:     1160px;
  --ww-gutter:        40px;
  --ww-section-y:     84px;
  --ww-space-1:       6px;
  --ww-space-2:       12px;
  --ww-space-3:       18px;
  --ww-space-4:       24px;
  --ww-space-5:       34px;
  --ww-space-6:       44px;
  --ww-space-7:       64px;

  --ww-radius-sm:     3px;   /* Buttons, Eingabefelder */
  --ww-radius-md:     6px;   /* Karten, Kacheln */
  --ww-shadow-panel:  0 18px 40px -22px rgba(20, 45, 70, 0.5);
}

/* ------------------------------------------------------------------ Basis -- */

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

.ww {
  margin: 0;
  background: var(--ww-ground);
  color: var(--ww-ink);
  font-family: var(--ww-font-sans);
  font-size: var(--ww-text-body);
  line-height: var(--ww-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* :not(.ww-btn) ist Absicht: sonst gewinnt diese Regel (0,1,1) gegen
   .ww-btn--primary (0,1,0), und der Button bekommt dunklen Text auf
   dunklem Grund. Gleiches gilt unten für .ww-nav a. */
.ww a:not(.ww-btn) { color: var(--ww-brand); text-decoration: none; }
.ww a:not(.ww-btn):hover { color: var(--ww-link-hover); }
.ww a.ww-btn { text-decoration: none; }

.ww :focus-visible {
  outline: 2px solid var(--ww-focus);
  outline-offset: 2px;
}

.ww h1, .ww h2, .ww h3 { text-wrap: balance; }
.ww p { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .ww * { transition: none !important; }
}

/* ----------------------------------------------------------------- Layout -- */

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

.ww-section { padding-block: var(--ww-section-y); }
.ww-section--tight { padding-block: var(--ww-space-7); }
.ww-section--surface { background: var(--ww-surface); border-block: 1px solid var(--ww-line); }

/* Mono-Eyebrow über einem Abschnitt. Die Nummer ist optional und gehört nur
   davor, wenn die Abschnitte wirklich eine Reihenfolge haben. */
.ww-eyebrow {
  font-family: var(--ww-font-mono);
  font-size: var(--ww-text-label);
  letter-spacing: var(--ww-track-label);
  color: var(--ww-label);
  margin: 0 0 var(--ww-space-2);
}

.ww-h1 {
  font-size: var(--ww-text-h1);
  font-weight: 600;
  line-height: var(--ww-leading-tight);
  letter-spacing: var(--ww-track-h1);
  margin: 0 0 var(--ww-space-4);
  max-width: 16ch;
}

.ww-h2 {
  font-size: var(--ww-text-h2);
  font-weight: 600;
  line-height: var(--ww-leading-snug);
  letter-spacing: var(--ww-track-h2);
  margin: 0 0 var(--ww-space-6);
}

.ww-h3 {
  font-size: var(--ww-text-h3);
  font-weight: 600;
  letter-spacing: var(--ww-track-h3);
  margin: 0 0 var(--ww-space-2);
}

.ww-lead {
  font-size: var(--ww-text-lead);
  line-height: 1.62;
  color: var(--ww-ink-soft);
  margin: 0 0 var(--ww-space-5);
  max-width: 52ch;
}

.ww-prose { font-size: var(--ww-text-body-lg); line-height: 1.72; color: var(--ww-ink-soft); }
.ww-prose p { margin: 0 0 var(--ww-space-3); max-width: 62ch; }

.ww-meta {
  font-family: var(--ww-font-mono);
  font-size: var(--ww-text-micro);
  color: var(--ww-ink-faint);
  margin: 0;
}

/* ------------------------------------------------------------------ Kopf --- */

.ww-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ww-space-4);
  padding-block: 22px;
}

/* Die Wortmarke: Bildmarke als W, Buchstaben als Pfade (logo/wortmarke.svg, seit 2026-10-01).
   Höhe vorgeben, Breite folgt. Auf dunklem Grund logo/wortmarke-dunkel.svg einsetzen.
   Nicht mehr Bildmarke plus ausgeschriebenes „Wilhelmswerk" — das doppelt das W. */
.ww-wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.ww-wordmark img,
.ww-wordmark svg {
  height: 20px;
  width: auto;
  display: block;
}
.ww-wordmark--lg img,
.ww-wordmark--lg svg { height: 36px; }

/* Die Bildmarke. Seitenverhältnis 946:504 — Höhe vorgeben, Breite folgt.
   Als <img src="logo/logo.2e98e853.svg"> oder inline; beides trägt dieselbe Klasse. */
.ww-logo {
  height: 22px;
  width: auto;
  flex: none;
  display: block;
}
.ww-logo--lg { height: 40px; }

/* Auf dunklem Grund (Footer) müssen die Balken hell werden — das Navy
   verschwindet dort sonst. Greift nur bei inline eingebundenem SVG. */
.ww-logo--on-dark .ww-logo__strokes { fill: var(--ww-brand-on); }

.ww-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: var(--ww-text-caption);
  font-weight: 500;
  flex-wrap: wrap;
}

.ww-nav a:not(.ww-btn) { color: #33424f; }

/* Der Kopfbereich mit Verlauf — trägt Header und Hero gemeinsam. */
.ww-sky { background: linear-gradient(180deg, var(--ww-sky-1) 0%, var(--ww-sky-2) 62%, var(--ww-ground) 100%); }

/* ------------------------------------------------------------------ Hero --- */

.ww-hero > *,
.ww-row > *,
.ww-split > *,
.ww-cards > *,
.ww-strip__grid > * { min-width: 0; }

.ww-hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--ww-space-7);
  align-items: center;
  padding-block: 78px 92px;
}

/* ---------------------------------------------------------------- Buttons -- */

.ww-actions { display: flex; gap: var(--ww-space-2); align-items: center; flex-wrap: wrap; }

.ww-btn {
  display: inline-block;
  font: inherit;
  font-size: var(--ww-text-small);
  font-weight: 500;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--ww-radius-sm);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.ww-btn--sm { padding: 9px 17px; }

.ww-btn--primary { background: var(--ww-brand); color: var(--ww-brand-on); }
.ww-btn--primary:hover { background: var(--ww-brand-hover); color: var(--ww-brand-on); }

.ww-btn--ghost {
  background: transparent;
  color: var(--ww-brand);
  border: 1px solid var(--ww-line-strong);
}
.ww-btn--ghost:hover { border-color: var(--ww-brand); color: var(--ww-brand); }

/* Der stille dritte Weg: kein Kasten, nur eine Linie darunter. */
.ww-btn--quiet {
  padding: 14px 20px;
  color: var(--ww-brand);
  border-bottom: 1px solid var(--ww-line-underline);
  border-radius: 0;
}
.ww-btn--quiet:hover { border-bottom-color: var(--ww-brand); }

/* ------------------------------------------------------- Terminal-Kachel --- */

.ww-terminal {
  background: var(--ww-brand-deep);
  border-radius: var(--ww-radius-md);
  padding: 20px 22px;
  font-family: var(--ww-font-mono);
  font-size: 13px;
  line-height: var(--ww-leading-loose);
  color: var(--ww-term-ink);
  box-shadow: var(--ww-shadow-panel);
  overflow-x: auto;
}
.ww-terminal__dots { display: flex; gap: var(--ww-space-1); margin-bottom: 16px; }
.ww-terminal__dots span { width: 9px; height: 9px; border-radius: 50%; background: #2f4356; }
.ww-terminal b { color: var(--ww-term-bright); font-weight: 400; }
.ww-terminal i { color: var(--ww-term-dim); font-style: normal; }

/* --------------------------------------------------------------- Faktband -- */

.ww-strip { background: var(--ww-surface); border-block: 1px solid var(--ww-line); }
.ww-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ww-strip__item { padding: 26px; border-left: 1px solid var(--ww-line); }
.ww-strip__item:first-child { padding-left: 0; border-left: 0; }
.ww-strip__item p { margin: 0; font-size: var(--ww-text-small); font-weight: 500; }
.ww-strip__item .ww-meta { margin-bottom: var(--ww-space-1); }

/* ------------------------------------------------------------ Leistungen --- */

/* Drei Spalten: Titel | Beschreibung | Ablauf in Mono. Trennlinien statt
   Karten — das hält die Seite ruhig. */
.ww-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: var(--ww-space-6);
  padding-block: 30px;
  border-top: 1px solid var(--ww-line);
  align-items: start;
}
.ww-row:last-child { border-bottom: 1px solid var(--ww-line); }
.ww-row__head { display: flex; align-items: center; gap: 14px; }
.ww-row__head .ww-h3 { margin: 0; }
.ww-row p { margin: 0; color: var(--ww-ink-soft); }
.ww-row__steps {
  font-family: var(--ww-font-mono);
  font-size: 13px;
  line-height: var(--ww-leading-loose);
  color: var(--ww-ink-faint);
}

/* Die drei Glyphen: Quadrat, Kreis, Raute. Unterscheiden die Leistungen,
   ohne Icons zu brauchen. */
.ww-glyph { width: 22px; height: 22px; border: 1.5px solid var(--ww-brand); flex: none; }
.ww-glyph--square { border-radius: var(--ww-radius-sm); }
.ww-glyph--circle { border-radius: 50%; }
.ww-glyph--diamond { transform: rotate(45deg); }

/* ----------------------------------------------------------------- Karten -- */

.ww-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.ww-card {
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-md);
  overflow: hidden;
  background: var(--ww-surface);
}
.ww-card__body { padding: 18px 20px; }
.ww-card__title { font-size: var(--ww-text-body); font-weight: 600; margin: 0 0 5px; }
.ww-card__text { font-size: var(--ww-text-caption); line-height: 1.55; color: var(--ww-ink-muted); margin: 0 0 var(--ww-space-2); }

/* Bildplatzhalter — die Schraffur macht sichtbar, dass hier noch ein echtes
   Bild fehlt, statt einen grauen Kasten als Gestaltung auszugeben. */
.ww-placeholder {
  background: repeating-linear-gradient(135deg, var(--ww-hatch-1) 0 10px, var(--ww-hatch-2) 10px 20px);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  min-height: 200px;
}
.ww-placeholder span {
  font-family: var(--ww-font-mono);
  font-size: 11px;
  color: var(--ww-ink-faint);
}

/* --------------------------------------------------------------- Kennzahl -- */

.ww-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ww-space-4);
  border-top: 1px solid var(--ww-line);
  padding-top: 22px;
}
.ww-stats__value {
  font-size: var(--ww-text-stat);
  font-weight: 600;
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- Formular --- */

.ww-form { display: grid; gap: 14px; }
.ww-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ww-input,
.ww-textarea {
  font: inherit;
  font-size: var(--ww-text-small);
  padding: 13px 14px;
  border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-surface);
  color: var(--ww-ink);
  width: 100%;
}
.ww-textarea { resize: vertical; }
.ww-input::placeholder,
.ww-textarea::placeholder { color: var(--ww-ink-faint); }

/* --------------------------------------------------------------- Zweispalt -- */

.ww-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--ww-space-7); }
.ww-split--portrait { grid-template-columns: 1fr 1.35fr; align-items: start; }

/* ------------------------------------------------------------------ Fuß ---- */

.ww-footer { background: var(--ww-brand); color: var(--ww-brand-quiet); }
.ww-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ww-space-4);
  flex-wrap: wrap;
  padding-block: 34px;
  font-size: var(--ww-text-caption);
}
.ww-footer a { color: var(--ww-brand-quiet); }
.ww-footer a:hover { color: var(--ww-brand-on); }
.ww-footer__links { display: flex; gap: 26px; }

/* ------------------------------------------------------------- Schmalbild -- */

@media (max-width: 900px) {
  :root { --ww-section-y: 60px; --ww-gutter: 28px; }
  .ww-hero { grid-template-columns: 1fr; gap: var(--ww-space-6); padding-block: 48px 60px; }
  .ww-h1 { max-width: 22ch; }
  .ww-row { grid-template-columns: 1fr; gap: var(--ww-space-3); }
  .ww-split,
  .ww-split--portrait { grid-template-columns: 1fr; gap: var(--ww-space-6); }
  .ww-cards { grid-template-columns: repeat(2, 1fr); }
  .ww-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .ww-strip__item:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 640px) {
  :root { --ww-gutter: 20px; --ww-section-y: 48px; }
  .ww-header { flex-direction: column; align-items: flex-start; gap: var(--ww-space-3); }
  .ww-nav { gap: 18px; }
  .ww-cards { grid-template-columns: 1fr; }
  .ww-strip__grid { grid-template-columns: 1fr; }
  .ww-strip__item { padding: 20px 0; border-left: 0; border-top: 1px solid var(--ww-line); }
  .ww-strip__item:first-child { border-top: 0; }
  .ww-form__pair { grid-template-columns: 1fr; }
  .ww-stats { grid-template-columns: 1fr; gap: var(--ww-space-3); }
  .ww-footer__inner { flex-direction: column; align-items: flex-start; }
}