/*
Theme Name: SHN Germany
Theme URI: https://example.com/
Author: SHN Germany
Author URI: https://example.com/
Description: Custom one-page fulfillment/logistics landing page theme for SHN Germany, converted from static HTML/Tailwind design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shn-germany
*/

/* ==========================================================================
   SHN Germany — Fulfillment Landing Page
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Sora:wght@100..800&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --shn-red: #c90c0d;
  --shn-red-dark: #a80a0b;
  --shn-ink: #1e1e1e;
  --shn-body: #424242;
  --shn-muted: #7c7c7c;
  --shn-muted-2: #969696;
  --shn-muted-3: #808080;
  --shn-surface: #f2f2f2;
  --shn-star: #e9b300;

  --shn-container: 1364px;   /* design content width */
  --shn-gutter: 20px;

  --shn-radius: 20px;
  --shn-radius-sm: 6px;
  --shn-radius-md: 10px;

  --shn-header-h: 80px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--shn-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, .font-sora { font-family: 'Sora', system-ui, sans-serif; }

::selection { background: var(--shn-red); color: #fff; }

/* Focus ring — keyboard only, brand coloured */
:focus-visible {
  outline: 2px solid var(--shn-red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout containers
   -------------------------------------------------------------------------- */
.shn-container {
  width: min(var(--shn-container), 100% - (var(--shn-gutter) * 2));
  margin-inline: auto;
}
/* Wider-than-container blocks used by the design */
.shn-container--wide  { width: min(1548px, 100% - (var(--shn-gutter) * 2)); margin-inline: auto; }
.shn-container--cta   { width: min(1690px, 100% - (var(--shn-gutter) * 2)); margin-inline: auto; }
.shn-container--why   { width: min(1536px, 100% - (var(--shn-gutter) * 2)); margin-inline: auto; }
.shn-container--flow  { width: min(902px,  100% - (var(--shn-gutter) * 2)); margin-inline: auto; }

@media (min-width: 640px) { :root { --shn-gutter: 24px; } }
@media (min-width: 1024px) { :root { --shn-gutter: 32px; } }

/* --------------------------------------------------------------------------
   4. Shared type patterns
   -------------------------------------------------------------------------- */
.shn-eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: var(--shn-red);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.shn-kicker {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--shn-ink);
  text-transform: uppercase;
  margin: 0;
}
.shn-h2 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: var(--shn-ink);
  font-size: clamp(28px, 1.6rem + 1.6vw, 42px);
  line-height: 1.25;
  margin: 0;
}
.shn-lead {
  font-size: 14px;
  line-height: 24px;
  color: var(--shn-muted);
  margin: 0;
}

/* Buttons ------------------------------------------------------------------ */
.shn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--shn-red);
  color: #fff;
  border: 0;
  border-radius: var(--shn-radius-sm);
  cursor: pointer;
  text-align: center;
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.shn-btn:hover {
  background: var(--shn-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(201, 12, 13, .55);
}
.shn-btn:active { transform: translateY(0); }

/* Frosted glass panel used all over the design ---------------------------- */
.shn-glass {
  background: rgba(240, 240, 240, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--shn-radius);
}
.shn-glass--light {
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--shn-radius);
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.shn-header {
  position: fixed;
  inset: 16px 0 auto 0;
  z-index: 120;
  transition: top .3s ease;
}
.shn-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--shn-header-h);
  padding: 0 20px;
  background: rgba(0, 0, 0, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--shn-radius);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.shn-header.is-stuck { top: 8px; }
.shn-header.is-stuck .shn-header__bar {
  background: rgba(0, 0, 0, .92);
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .7);
}

.shn-nav-link {
  position: relative;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
  transition: color .2s ease;
}
.shn-nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--shn-red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.shn-nav-link:hover::after,
.shn-nav-link.is-active::after { transform: scaleX(1); }

/* Mobile drawer */
.shn-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: 1fr;
  background: rgba(12, 12, 12, .97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.shn-drawer.is-open { opacity: 1; visibility: visible; }
.shn-drawer a {
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease, color .2s ease;
}
.shn-drawer.is-open a { opacity: 1; transform: none; }
.shn-drawer.is-open a:nth-child(1) { transition-delay: .08s; }
.shn-drawer.is-open a:nth-child(2) { transition-delay: .14s; }
.shn-drawer.is-open a:nth-child(3) { transition-delay: .20s; }
.shn-drawer.is-open a:nth-child(4) { transition-delay: .26s; }
.shn-drawer a:hover { color: var(--shn-red); }

/* Burger icon */
.shn-burger span {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.shn-burger span + span { margin-top: 5px; }
.shn-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.shn-burger.is-open span:nth-child(2) { opacity: 0; }
.shn-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.shn-hero {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 150px 0 80px;
  overflow: hidden;
}
.shn-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.shn-hero__title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: var(--shn-ink);
  margin: 12px 0 0;
  font-size: clamp(30px, 1.4rem + 3.4vw, 54px);
  line-height: 1.1;
}
@media (min-width: 1024px) {
  .shn-hero { min-height: 939px; padding: 277px 0 0; align-items: flex-start; }
  .shn-hero__title { line-height: 59px; }
}
/* Keeps the hero readable on tall/narrow phones */
.shn-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,0) 75%);
  pointer-events: none;
}
@media (min-width: 1024px) { .shn-hero::after { display: none; } }

/* --------------------------------------------------------------------------
   7. Fluid canvas system
   Reproduces the artboard's absolute positioning, but scaled to the
   available width. `--u` equals exactly 1px at the native design width,
   so every design value can be written verbatim as `calc(N * var(--u))`.
   -------------------------------------------------------------------------- */
.canvas {
  position: relative;
  width: 100%;
  container-type: inline-size;
  aspect-ratio: var(--cw) / var(--ch);
  --u: calc(100cqw / var(--cw));
}
.canvas .pin {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.canvas .pin[style*='--h'] { height: calc(var(--h) * var(--u)); }

.canvas .pin img { width: 100%; height: 100%; object-fit: contain; }

/* Text inside a canvas scales with it */
.canvas .c-label {
  display: flex;
  overflow-wrap: anywhere;
  word-break: break-word;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: 'Sora', sans-serif;
  color: var(--shn-ink);
  font-size: calc(16 * var(--u));
  line-height: calc(20 * var(--u));
}
.canvas .c-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: calc(16 * var(--u));
  line-height: calc(20 * var(--u));
  text-transform: uppercase;
}
.canvas .c-glass {
  background: rgba(240, 240, 240, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: calc(20 * var(--u));
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.canvas .c-glass:hover {
  transform: translateY(calc(-6 * var(--u)));
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-16 * var(--u)) rgba(0, 0, 0, .3);
}
.canvas .c-icon { border-radius: calc(10 * var(--u)); overflow: hidden; }
.canvas .c-icon img { object-fit: cover; }

/* The canvas only runs on wide screens; below that a stacked layout is used. */
.canvas-wrap { display: none; }
.stack-wrap  { display: block; }
@media (min-width: 1180px) {
  .canvas-wrap { display: block; }
  .stack-wrap  { display: none; }
}

/* --------------------------------------------------------------------------
   8. Badge card (stacked / mobile version of the canvas pins)
   -------------------------------------------------------------------------- */
.shn-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 18px 12px;
  text-align: center;
  background: rgba(240, 240, 240, .85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--shn-radius);
  transition: transform .3s ease, box-shadow .3s ease;
}
.shn-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .35);
}
.shn-badge img {
  width: 79px;
  height: 68px;
  object-fit: cover;
  border-radius: var(--shn-radius-md);
}
.shn-badge span {
  font-family: 'Sora', sans-serif;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 15px;
  line-height: 20px;
  color: var(--shn-ink);
}

/* --------------------------------------------------------------------------
   9. Integration cards
   -------------------------------------------------------------------------- */
.shn-integration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  aspect-ratio: 210 / 226;
  background: rgba(240, 240, 240, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--shn-radius);
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.shn-integration:hover {
  transform: translateY(-6px);
  background: rgba(240, 240, 240, .95);
  box-shadow: 0 18px 38px -20px rgba(0, 0, 0, .4);
}
.shn-integration svg { height: clamp(48px, 6vw, 73px); width: auto; }
.shn-integration img {
  width: 100%;
  max-width: 140px;
  height: clamp(40px, 5.4vw, 62px);
  object-fit: contain;
}
.shn-integration figure.wp-block-image { margin: 0; width: 100%; max-width: 140px; }
.shn-integration figure.wp-block-image img { width: 100%; height: clamp(40px, 5.4vw, 62px); object-fit: contain; }
.shn-integration__name {
  font-family: 'Sora', sans-serif;
  font-size: clamp(14px, 1.1vw, 20px);
  color: var(--shn-ink);
  text-align: center;
}
.shn-integration--empty {
  cursor: pointer;
}
.shn-integration--empty .dash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 80%;
  border: 2px dashed #7c7c7c;
  border-radius: 21px;
  transition: border-color .3s ease, background-color .3s ease;
}
.shn-integration--empty:hover .dash {
  border-color: var(--shn-red);
  background: rgba(201, 12, 13, .04);
}
.shn-integration--empty:hover .dash svg line { stroke: var(--shn-red); }

/* --------------------------------------------------------------------------
   10. Service cards (grey band)
   -------------------------------------------------------------------------- */
.shn-service {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--shn-radius);
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
@media (min-width: 1180px) { .shn-service { min-height: 338px; } }
.shn-service:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 22px 46px -24px rgba(0, 0, 0, .35);
}
.shn-service__media {
  aspect-ratio: 283 / 191;
  border-radius: var(--shn-radius);
  overflow: hidden;
}
.shn-service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.shn-service:hover .shn-service__media img { transform: scale(1.05); }
.shn-service__title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--shn-ink);
  text-align: center;
  margin: 22px 0 0;
}
.shn-service__text {
  font-size: 14px;
  line-height: 20px;
  color: var(--shn-muted-2);
  text-align: center;
  margin: 10px 0 0;
}

/* Road band --------------------------------------------------------------- */
.shn-road {
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   11. Process timeline
   -------------------------------------------------------------------------- */
.shn-flow-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--shn-radius);
  background: var(--shn-surface);
  color: var(--shn-ink);
  font-size: 16px;
  transition: background-color .3s ease, color .3s ease;
}
.shn-flow-step.is-first .shn-flow-step__num { background: var(--shn-red); color: #fff; }
.shn-flow-step__title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--shn-ink);
  margin: 0;
}
.shn-flow-step__text {
  font-size: 12px;
  line-height: 20px;
  color: var(--shn-muted-2);
  text-transform: uppercase;
  margin: 6px 0 0;
}
.shn-flow-step.is-first .shn-flow-step__title { color: #fff; }

/* Desktop: alternating rail layout on an 902px artboard */
@media (min-width: 1024px) {
  .shn-flow {
    position: relative;
    width: 902px;
    max-width: 100%;
    height: 770px;
    margin-inline: auto;
  }
  .shn-flow__panel {
    position: absolute;
    left: 0; top: 0;
    width: 902px; height: 128px;
    max-width: 100%;
    background: rgba(0, 0, 0, .9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--shn-radius);
  }
  .shn-flow .fp { position: absolute; }
  .shn-flow__rail { position: absolute; left: 449px; width: 4px; height: 144px; background: var(--shn-surface); }
  .shn-flow__rail.is-first { background: var(--shn-red); }
  .shn-flow__num {
    position: absolute;
    left: 431px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--shn-radius);
    background: var(--shn-surface);
    color: var(--shn-ink);
    font-size: 16px;
  }
  .shn-flow__num.is-first { background: var(--shn-red); color: #fff; }
  .shn-flow__icon { position: absolute; }
  .shn-flow__icon img { width: 100%; height: 100%; object-fit: contain; }
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.shn-testimonial {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 40px;
  background: var(--shn-surface);
  border-radius: var(--shn-radius);
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (min-width: 1180px) { .shn-testimonial { min-height: 314px; } }
.shn-testimonial:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .3);
}
.shn-testimonial__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: var(--shn-ink);
  text-transform: uppercase;
  margin: 0;
}
.shn-testimonial__meta {
  font-size: 14px;
  color: var(--shn-muted-3);
  text-transform: uppercase;
  margin: 2px 0 0;
}
.shn-testimonial__body {
  font-size: 16px;
  line-height: 24px;
  color: var(--shn-body);
  margin: 20px 0 0;
}
.shn-stars { display: flex; gap: 4px; margin-top: 10px; }
.shn-stars svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   13. CTA
   -------------------------------------------------------------------------- */
.shn-cta { position: relative; isolation: isolate; }
.shn-cta__bg {
  width: 100%;
  height: auto;
  border-radius: var(--shn-radius);
}
.shn-cta__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding: 20px;
}
@media (min-width: 1180px) { .shn-cta__inner { padding-top: 90px; } }
.shn-cta__title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: var(--shn-ink);
  text-transform: uppercase;
  font-size: clamp(20px, 1rem + 2.2vw, 32px);
  line-height: 1.18;
  margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.shn-footer { background: var(--shn-ink); color: #fff; }
.shn-footer__heading {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.shn-footer__list { list-style: none; margin: 0; padding: 0; }
.shn-footer__list a { white-space: nowrap; }
/* Footer column grid — declared here in full so no utility can override it */
.shn-footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 640px)  { .shn-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) {
  .shn-footer__grid {
    grid-template-columns: 441px 149px 190px 231px;
    justify-content: space-between;
    gap: 0;
  }
  .shn-footer__contact { width: 231px; }
}
.shn-footer__list a,
.shn-footer p.shn-footer__text {
  font-size: 14px;
  line-height: 28px;
  color: var(--shn-muted-2);
  text-transform: uppercase;
}
.shn-footer__list a { transition: color .2s ease, padding-left .2s ease; display: inline-block; }
.shn-footer__list a:hover { color: #fff; padding-left: 4px; }
.shn-footer__social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  transition: background-color .25s ease, transform .25s ease;
}
.shn-footer__social a:hover { background: var(--shn-red); transform: translateY(-3px); }
.shn-footer__social svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   15. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   16. Back-to-top
   -------------------------------------------------------------------------- */
.shn-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--shn-red);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background-color .2s ease;
  box-shadow: 0 10px 26px -10px rgba(201, 12, 13, .7);
}
.shn-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.shn-top:hover { background: var(--shn-red-dark); }


@media (max-width: 640px) {
  .shn-testimonial { padding: 28px 24px; }
  .shn-testimonial__name { font-size: 20px; }
  .shn-service { padding: 16px; }
  :root { --shn-header-h: 64px; }
}

/* --------------------------------------------------------------------------
   18. Block-editor pattern support
   These rules exist because a few background photos are inserted as real
   Image blocks (<figure class="wp-block-image">) instead of a bare <img>,
   so a client can swap them from the Media Library. This makes those
   figures behave exactly like the original bare <img> did -- same
   position/sizing/object-fit as the original .shn-hero__bg / .shn-cta__bg
   / .shn-road rules. Nothing about the visual design changes.
   -------------------------------------------------------------------------- */
.shn-hero > .shn-hero-bg-figure { margin: 0; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.shn-hero > .shn-hero-bg-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }

.shn-cta > .shn-cta-bg-figure { margin: 0; width: 100%; }
.shn-cta > .shn-cta-bg-figure img { width: 100%; height: auto; border-radius: var(--shn-radius); display: block; }

.shn-road-figure { margin: 0; }
.shn-road-figure img { width: 100%; height: auto; pointer-events: none; user-select: none; }
.relative > .shn-road-figure { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(32.5%); z-index: 0; }

.shn-service__media figure.wp-block-image { margin: 0; width: 100%; height: 100%; }
.shn-service__media figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* Per-diagram canvas sizes, set via a class instead of an inline style so
   the wrapping Group block's markup stays simple and always validates
   cleanly in the editor. */
.shn-canvas--welcome { --cw: 1548; --ch: 692; }
.shn-canvas--why { --cw: 1536; --ch: 1024; }

/* Editable "pin" blocks (shn/pin-image, shn/pin-label, shn/pin-panel) reuse
   the exact same .pin / .fp / .shn-flow__* rules already defined above --
   just a focus outline added while editing, for orientation only. */
.editor-styles-wrapper .pin:focus-within,
.editor-styles-wrapper .fp:focus-within { outline: 2px dashed var(--shn-red); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   19. Contact section (Kontaktformular)
   Dark info card + light form card, sized/spaced like the other sections.
   The form card is pre-styled for a WPForms shortcode ([wpforms id="…"]) —
   drop the real shortcode in and it inherits the theme's look automatically.
   -------------------------------------------------------------------------- */
.shn-contact__info {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px;
  background: var(--shn-ink);
  border-radius: var(--shn-radius);
}
.shn-contact__info-item { display: flex; align-items: flex-start; gap: 14px; }
.shn-contact__info-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--shn-red);
}
.shn-contact__info-icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shn-contact__info-label {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--shn-muted-2);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 2px;
}
.shn-contact__info-value { font-size: 16px; line-height: 24px; color: #fff; margin: 0; overflow-wrap: anywhere; }
.shn-contact__info-value a { color: #fff; transition: color .2s ease; }
.shn-contact__info-value a:hover { color: var(--shn-red); }

.shn-contact__form-card {
  padding: 40px;
  background: var(--shn-surface);
  border-radius: var(--shn-radius);
}
.shn-contact__form-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--shn-ink);
  margin: 0;
}
.shn-contact__form-text { font-size: 14px; line-height: 20px; color: var(--shn-muted-2); margin: 10px 0 24px; }

/* Placeholder shown until a real WPForms shortcode/ID is dropped in */
.shn-contact__placeholder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  text-align: center;
  border: 2px dashed #b9b9b9;
  border-radius: var(--shn-radius-sm);
  background: rgba(255, 255, 255, .5);
}
.shn-contact__placeholder p { margin: 0; font-size: 14px; line-height: 20px; color: var(--shn-muted); }
.shn-contact__placeholder code {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: #fff;
  border-radius: 4px;
  font-size: 13px;
  color: var(--shn-red);
}

/* WPForms — restyled to match the theme once a real form is inserted here */
.shn-contact__form-card .wpforms-container { margin: 0; }
.shn-contact__form-card .wpforms-form { display: flex; flex-direction: column; gap: 18px; }
.shn-contact__form-card .wpforms-field { padding: 0 !important; margin: 0 !important; }
.shn-contact__form-card .wpforms-field-label {
  display: block;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: var(--shn-ink);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 8px !important;
}
.shn-contact__form-card .wpforms-field-required { color: var(--shn-red); }
.shn-contact__form-card .wpforms-field-sublabel { font-size: 12px; color: var(--shn-muted-2); }
.shn-contact__form-card input[type="text"],
.shn-contact__form-card input[type="email"],
.shn-contact__form-card input[type="tel"],
.shn-contact__form-card input[type="url"],
.shn-contact__form-card input[type="number"],
.shn-contact__form-card select,
.shn-contact__form-card textarea {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(30, 30, 30, .14);
  border-radius: var(--shn-radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--shn-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.shn-contact__form-card textarea { min-height: 140px; resize: vertical; }
.shn-contact__form-card input:focus,
.shn-contact__form-card select:focus,
.shn-contact__form-card textarea:focus {
  outline: none;
  border-color: var(--shn-red);
  box-shadow: 0 0 0 3px rgba(201, 12, 13, .12);
}
.shn-contact__form-card .wpforms-field-description { font-size: 12px; color: var(--shn-muted-2); margin-top: 6px; }
.shn-contact__form-card .wpforms-error { font-size: 12px; color: var(--shn-red); margin-top: 6px; }
.shn-contact__form-card .wpforms-submit-container { margin: 4px 0 0; }
.shn-contact__form-card .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 28px;
  background: var(--shn-red);
  color: #fff;
  border: 0;
  border-radius: var(--shn-radius-sm);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.shn-contact__form-card .wpforms-submit:hover {
  background: var(--shn-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(201, 12, 13, .55);
}
.shn-contact__form-card .wpforms-confirmation-container {
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(201, 12, 13, .25);
  border-radius: var(--shn-radius-sm);
}

@media (max-width: 640px) {
  .shn-contact__info, .shn-contact__form-card { padding: 28px 24px; }
}

/* --------------------------------------------------------------------------
   20. Legal / info pages (Datenschutz, Impressum, AGB …)
   Quiet page header + typography for plain editor content (headings,
   paragraphs, lists) so a Page using template-datenschutz.php looks on
   -brand without any special blocks.
   -------------------------------------------------------------------------- */
.shn-page-hero { border-bottom: 1px solid rgba(30, 30, 30, .08); }
.shn-page-hero__title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: var(--shn-ink);
  font-size: clamp(28px, 1.4rem + 2vw, 44px);
  line-height: 1.2;
  margin: 0;
}
.shn-page-hero__meta { font-size: 13px; line-height: 20px; color: var(--shn-muted-2); margin: 0; }

.shn-legal { max-width: 760px; }
.shn-legal > *:first-child { margin-top: 0; }
.shn-legal h2 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.1rem + .6vw, 26px);
  line-height: 1.3;
  color: var(--shn-ink);
  margin: 44px 0 14px;
}
.shn-legal h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--shn-ink);
  margin: 28px 0 10px;
}
.shn-legal p { font-size: 15px; line-height: 26px; color: var(--shn-body); margin: 0 0 16px; }
.shn-legal ul, .shn-legal ol { margin: 0 0 16px; padding-left: 22px; }
.shn-legal li { font-size: 15px; line-height: 26px; color: var(--shn-body); margin: 0 0 6px; }
.shn-legal ul > li::marker { color: var(--shn-red); }
.shn-legal a { color: var(--shn-red); text-decoration: underline; text-decoration-color: rgba(201, 12, 13, .35); }
.shn-legal a:hover { text-decoration-color: var(--shn-red); }
.shn-legal strong { color: var(--shn-ink); font-weight: 600; }
.shn-legal hr { border: 0; border-top: 1px solid rgba(30, 30, 30, .1); margin: 36px 0; }
.shn-legal__back a {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--shn-ink);
  text-decoration: none;
  transition: color .2s ease;
}
.shn-legal__back a:hover { color: var(--shn-red); }