:root {
  color-scheme: dark;
  --color-bg: #0A0A0A;
  --color-bg-soft: #111111;
  --color-surface: #171717;
  --color-surface-hover: #1E1E1E;
  --color-text: #FFFFFF;
  --color-text-muted: #B8B8B8;
  --color-accent: #E30613;
  --color-accent-hover: #C80511;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-white: #FFFFFF;
  --color-black: #000000;
  --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-body: clamp(1rem, 1.1vw, 1.125rem);
  --font-size-h1: clamp(2.5rem, 5vw, 5rem);
  --font-size-h2: clamp(2rem, 3.5vw, 3.5rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.75rem);
  --content-width: 1280px;
  --page-gutter: 20px;
  --section-spacing: clamp(4rem, 8vw, 7.5rem);
  --radius-button: 0.5rem;
  --radius-card: 0.75rem;
  --transition-duration: 200ms;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6, p {
  margin-block: 0 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.15;
}

h1 { font-size: var(--font-size-h1); line-height: 1.05; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

button, input, select, textarea {
  font: inherit;
  max-width: 100%;
}

button, input:not([type="hidden"]), select {
  min-height: 44px;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}

img { display: block; }

.logo {
  width: auto;
  height: auto;
  object-fit: contain;
}

:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 4px;
}

.container {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-width));
  margin-inline: auto;
}

.section { padding-block: var(--section-spacing); }
.text-muted { color: var(--color-text-muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.grid > *, .flex > * { min-width: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 48px;
  max-width: 100%;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-duration) ease,
    border-color var(--transition-duration) ease;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.35);
}

.card {
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.card-interactive {
  transition: transform var(--transition-duration) ease,
    background-color var(--transition-duration) ease,
    border-color var(--transition-duration) ease;
}

/* Header und Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 72px;
  gap: 0 1rem;
}

.header-brand { flex: 0 1 auto; min-width: 0; }
.header-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 62px;
  object-fit: contain;
  border: 0;
}

.menu-toggle {
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 2px;
  margin-block: 5px;
  background: currentColor;
}
.menu-toggle[aria-expanded="true"] { border-color: var(--color-text-muted); }
.header-navigation { flex-basis: 100%; padding-block: 0.75rem 1.5rem; }
.header-navigation[hidden], .menu-toggle[hidden] { display: none; }
.navigation-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.navigation-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.navigation-list a:hover, .navigation-list a.active {
  color: var(--color-white);
  border-color: var(--color-accent);
}
.header-cta { width: 100%; }
html { scroll-padding-top: 100px; }

@media (min-width: 768px) {
  .header-logo { max-height: 64px; }
}

@media (min-width: 1200px) {
  .header-inner { min-height: 96px; flex-wrap: nowrap; gap: 1.5rem; }
  .header-logo { max-height: 80px; }
  .menu-toggle { display: none; }
  .header-navigation {
    display: flex;
    flex-basis: auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
  }
  .navigation-list { display: flex; gap: 0.75rem; margin: 0; }
  .navigation-list a {
    padding: 0.5rem 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .header-cta { width: auto; white-space: nowrap; }
}

/* Hero mit unverändertem Originalbild und separatem CSS-Overlay. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 780px;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--color-bg);
}
.hero-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  pointer-events: none;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.84) 25%, rgba(10,10,10,0.7) 50%, rgba(10,10,10,0.5) 75%, rgba(10,10,10,0.34) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.12), transparent 45%, rgba(10,10,10,0.3));
  pointer-events: none;
}
.hero-layout {
  display: grid;
  min-height: 620px;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-content { min-width: 0; }
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: clamp(0.6875rem, 1vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.hero-eyebrow::before {
  content: "";
  flex: 0 0 20px;
  height: 2px;
  background: var(--color-accent);
}
.hero-title {
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 6.7vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
}
.hero-title span { display: block; }
.hero-title-accent { color: var(--color-accent); }
.hero-description {
  max-width: 600px;
  margin-bottom: 2rem;
  color: var(--color-text-muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero-actions .btn { flex: 1 1 200px; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.hero-trust li { display: flex; align-items: baseline; gap: 0.375rem; }
.hero-trust span { color: var(--color-white); }
@media (min-width: 1024px) {
  .hero { padding-bottom: calc(clamp(3rem, 6vw, 5rem) + 40px); }
  .hero-background { object-position: center; }
  .hero::before {
    background: linear-gradient(90deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.8) 20%, rgba(10,10,10,0.64) 40%, rgba(10,10,10,0.44) 60%, rgba(10,10,10,0.27) 80%, rgba(10,10,10,0.18) 100%),
      linear-gradient(180deg, rgba(10,10,10,0.1), transparent 45%, rgba(10,10,10,0.25));
  }
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(520px, calc(100svh - 256px), 620px);
    gap: clamp(2rem, 4vw, 4rem);
  }
  .hero-title { font-size: clamp(2.75rem, 4.2vw, 4rem); }
  .hero-actions .btn { flex: 0 1 auto; }
}

@media (hover: hover) {
  .btn-primary:hover { background: var(--color-accent-hover); }
  .btn-secondary:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-text-muted);
  }
  .card-interactive:hover {
    transform: translateY(-3px);
    background: var(--color-surface-hover);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card-interactive:hover { transform: none; }
}

/* Leistungen */
.services { background: var(--color-bg); }
.services-heading { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.services-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
}
.services-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--color-accent);
}
.services-heading h2 { max-width: 1000px; }
.services-heading h2 span { color: var(--color-accent); }
.services-intro { max-width: 680px; margin: 1.5rem 0 0; color: var(--color-text-muted); }
.services-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.4vw, 1.25rem); }
.service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.75rem, 2.2vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-soft);
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
  scroll-margin-top: 1rem;
}
.service-marker { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.service-marker > span:first-child { color: var(--color-text-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.service-icon { flex: 0 0 32px; color: var(--color-text-muted); }
.service-card h3 { font-size: clamp(1.1875rem, 1.45vw, 1.4375rem); line-height: 1.25; margin-bottom: 0.875rem; word-break: normal; overflow-wrap: normal; hyphens: none; }
.service-card p { color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.6; margin-bottom: 1.25rem; }
.service-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.service-link span { color: var(--color-accent); }
.service-link:hover { text-decoration: underline; }
@media (max-width: 359px) {
  .service-card h3 { font-size: 1.15625rem; }
}
@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(calc(100vw - 40px), 1360px); position: relative; left: 50%; transform: translateX(-50%); }
}
@media (hover: hover) {
  .service-card:hover { border-color: rgba(227, 6, 19, 0.45); background: var(--color-surface); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .service-card { transition: none; }
  .service-card:hover { transform: none; }
}

/* Einheitliche Originalbilder in den Leistungskarten. */
.service-image {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 0.375rem;
  margin-bottom: 1.5rem;
}
.services-grid { grid-auto-rows: 1fr; }

/* Firmen & Vereine */
.audiences { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
.audiences-heading { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.audiences-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.audiences-eyebrow::before { content: ""; flex: 0 0 20px; height: 2px; background: var(--color-accent); }
.audiences-heading h2 { max-width: 1000px; }
.audiences-heading h2 span { color: var(--color-accent); }
.audiences-intro { max-width: 720px; margin: 1.5rem 0 0; color: var(--color-text-muted); }
.audiences-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.audience-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  background: var(--color-bg);
}
.audience-panel h3 { font-size: clamp(1.125rem, 2vw, 1.625rem); line-height: 1.2; }
.audience-panel > p { max-width: 520px; margin: 0.5rem 0 0; color: var(--color-text-muted); }
.audience-benefits { display: grid; gap: 0.875rem; margin: 2rem 0; padding: 0; list-style: none; }
.audience-benefits li { display: flex; align-items: baseline; gap: 0.75rem; }
.audience-benefits span { flex: 0 0 auto; color: var(--color-accent); }
.audience-panel .btn { margin-top: auto; }
@media (min-width: 900px) {
  .audiences-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Individuelle Bestellshops: reine HTML/CSS-Beispielansicht. */
.order-shops { background: var(--color-bg); }
.order-shops-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 5vw, 4rem); }
.order-shops-content { min-width: 0; }
.order-shops-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; }
.order-shops-eyebrow::before { content: ""; flex: 0 0 20px; height: 2px; background: var(--color-accent); }
.order-shops-content h2 span { color: var(--color-accent); }
.order-shops-intro { max-width: 600px; color: var(--color-text-muted); margin: 1.5rem 0 0; }
.order-shops-benefits { display: grid; gap: 0.875rem; padding: 0; margin: 2rem 0; list-style: none; }
.order-shops-benefits li { display: flex; align-items: baseline; gap: 0.75rem; }
.order-shops-benefits span { flex: 0 0 auto; color: var(--color-accent); }
.order-shops-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.shop-preview { min-width: 0; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg-soft); }
.shop-browser-bar { display: flex; gap: 6px; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.shop-browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-muted); opacity: 0.5; }
.shop-browser-bar span:first-child { background: var(--color-accent); opacity: 1; }
.shop-preview-navigation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 1.25rem; border-bottom: 1px solid var(--color-border); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; }
.shop-preview-label { color: var(--color-text-muted); font-size: 0.625rem; font-weight: 500; }
.shop-preview-body { padding: clamp(1rem, 2vw, 1.5rem); }
.shop-preview-body > h3 { font-size: clamp(1rem, 1.4vw, 1.25rem); margin-bottom: 1.5rem; }
.shop-products { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.shop-product { display: flex; flex-direction: column; min-width: 0; padding: 0.75rem; border: 1px solid var(--color-border); background: var(--color-surface); transition: border-color 220ms ease, background-color 220ms ease; }
.shop-product-visual { display: grid; place-items: center; aspect-ratio: 1; background: var(--color-bg-soft); margin-bottom: 1rem; }
.shop-garment { position: relative; display: block; width: 80%; height: 80%; background: #343434; clip-path: polygon(28% 12%, 40% 8%, 60% 8%, 72% 12%, 98% 30%, 84% 47%, 72% 38%, 72% 92%, 28% 92%, 28% 38%, 16% 47%, 2% 30%); }
.shop-garment::after { content: ""; position: absolute; top: 31%; right: 35%; width: 10%; height: 3%; background: var(--color-accent); }
.shop-garment-hoodie { background: #292929; clip-path: polygon(36% 3%, 64% 3%, 72% 19%, 89% 29%, 98% 87%, 82% 91%, 73% 46%, 73% 96%, 27% 96%, 27% 46%, 18% 91%, 2% 87%, 11% 29%, 28% 19%); }
.shop-garment-jacket { background: #414141; clip-path: polygon(40% 6%, 60% 6%, 65% 18%, 87% 28%, 97% 86%, 82% 90%, 73% 46%, 73% 94%, 27% 94%, 27% 46%, 18% 90%, 3% 86%, 13% 28%, 35% 18%); }
.shop-garment-jacket::before { content: ""; position: absolute; top: 18%; bottom: 7%; left: 49%; width: 2%; background: var(--color-text-muted); }
.shop-product h4 { font-size: 0.8125rem; line-height: 1.35; margin: 0 0 0.75rem; }
.shop-product-select { display: block; margin-top: auto; padding: 0.5rem 0.375rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 0.25rem; font-size: 0.75rem; text-align: center; color: var(--color-text-muted); }
.shop-preview-highlight { display: inline-block; margin: 1.25rem 0 0; padding: 0.5rem 0.75rem; border-left: 2px solid var(--color-accent); background: var(--color-surface); font-size: 0.75rem; }
.shop-preview figcaption { padding: 0 1.5rem 1.5rem; color: var(--color-text-muted); font-size: 0.75rem; line-height: 1.6; }
@media (min-width: 600px) { .shop-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .order-shops-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
@media (hover: hover) { .shop-product:hover { border-color: rgba(227,6,19,0.4); background: var(--color-surface-hover); } }
@media (prefers-reduced-motion: reduce) { .shop-product { transition: none; } }

/* Referenzen & Vertrauen */
.references { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
.references-heading { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.references-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; }
.references-eyebrow::before { content: ""; flex: 0 0 20px; height: 2px; background: var(--color-accent); }
.references-heading h2 span { color: var(--color-accent); }
.references-intro { max-width: 680px; margin: 1.5rem 0 0; color: var(--color-text-muted); }
.reference-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.reference-slot { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 112px; padding: 1rem 0.5rem; border: 1px solid var(--color-border); border-radius: 0.375rem; background: var(--color-bg); }
.reference-slot span { color: var(--color-text-muted); font-size: clamp(0.625rem, 1vw, 0.8125rem); font-weight: 600; letter-spacing: 0.06em; }
.reference-slot img { display: block; width: auto; height: auto; max-width: 100%; max-height: 80px; object-fit: contain; }
.references-trust { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-block: clamp(2rem, 4vw, 3rem); border-block: 1px solid var(--color-border); }
.references-trust > div { min-width: 0; }
.references-trust dt { margin-bottom: 0.5rem; font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1.25; font-weight: 700; }
.references-trust dd { margin: 0; color: var(--color-text-muted); font-size: 1rem; }
.references-closing { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding-top: clamp(2.5rem, 5vw, 4rem); }
.references-closing > div { min-width: 0; max-width: 800px; }
.references-closing h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.references-closing p { margin: 0; color: var(--color-text-muted); }
.references-closing .btn { flex-shrink: 0; }
@media (min-width: 640px) { .reference-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .references-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .references-trust > div + div { border-left: 1px solid var(--color-border); padding-left: 2rem; }
  .references-closing { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1200px) { .reference-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Warum 160 Grad: offene Vorteile mit Trennlinien. */
.why { background: var(--color-bg); }
.why-heading { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.why-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; }
.why-eyebrow::before { content: ""; flex: 0 0 20px; height: 2px; background: var(--color-accent); }
.why-heading h2 span, .why-highlight h3 span { color: var(--color-accent); }
.why-intro { max-width: 720px; margin: 1.5rem 0 0; color: var(--color-text-muted); }
.why-benefits { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.why-benefit { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: clamp(0.75rem, 2vw, 1.5rem); padding-block: clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid var(--color-border); }
.why-number { color: var(--color-text-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; padding-top: 0.2rem; }
.why-number::after { content: ""; display: block; width: 20px; height: 2px; margin-top: 0.75rem; background: var(--color-accent); }
.why-benefit h3 { font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1.25; margin-bottom: 0.75rem; }
.why-benefit p { max-width: 520px; margin: 0; color: var(--color-text-muted); }
.why-highlight { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(1.5rem, 4vw, 3rem); background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
.why-highlight > * { min-width: 0; }
.why-highlight h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; margin: 0; }
.why-highlight p { color: var(--color-text-muted); margin: 0 0 1.5rem; }
@media (min-width: 800px) {
  .why-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: clamp(2rem, 5vw, 4rem); }
  .why-highlight { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
}

/* Kontakt & Standort */
.contact { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
.contact-heading { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.contact-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; }
.contact-eyebrow::before { content: ""; flex: 0 0 20px; height: 2px; background: var(--color-accent); }
.contact-heading h2 span { color: var(--color-accent); }
.contact-intro { max-width: 720px; margin: 1.5rem 0 0; color: var(--color-text-muted); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.contact-details, .contact-location { min-width: 0; }
.contact-details h3 { max-width: 520px; }
.contact-details address { color: var(--color-text-muted); font-style: normal; margin-top: 1.5rem; }
.contact-methods { display: grid; gap: 1.5rem; margin: 2rem 0 0; }
.contact-methods dt { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 0.375rem; }
.contact-methods dd { margin: 0; }
.contact-methods a { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; text-decoration-thickness: 1px; }
.contact-methods a:hover { text-decoration-color: var(--color-accent); }
.contact-location { align-self: start; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.contact-map { display: block; width: 100%; height: clamp(300px, 42vw, 360px); margin-bottom: 1.5rem; border: 0; border-radius: var(--radius-button); background: var(--color-surface); }
.contact-location h3 { font-size: clamp(1.125rem, 1.7vw, 1.5rem); }
.contact-location > p { color: var(--color-text-muted); }
.contact-pending { color: var(--color-text-muted); font-size: 0.8125rem; margin: 1rem 0 0; }
.contact-location .btn:disabled { cursor: default; opacity: 0.7; }
.contact-quick { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--color-border); }
.contact-quick h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); margin-bottom: 1.5rem; }
.contact-quick-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 1rem; }
.contact-quick-link { display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-width: 0; min-height: 72px; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-button); background: var(--color-bg); color: var(--color-white); font-size: 1rem; font-weight: 600; text-decoration: none; text-align: center; transition: border-color 220ms ease, background-color 220ms ease; }
.contact-quick-link svg { flex: 0 0 22px; color: var(--color-accent); }
.contact-quick-link:disabled { cursor: default; }
@media (min-width: 768px) { .contact-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-map { height: clamp(380px, 32vw, 440px); }
}
@media (hover: hover) { .contact-quick-link:not(:disabled):hover { border-color: rgba(227,6,19,0.5); background: var(--color-surface); } }
@media (prefers-reduced-motion: reduce) { .contact-quick-link { transition: none; } }

/* Kontaktzeiten und fester WhatsApp-Schnellzugriff. */
.contact-hours { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); scroll-margin-top: 1rem; }
.contact-hours dl { display: grid; gap: 1rem; margin: 0; }
.contact-hours dl > div { display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; }
.contact-hours dt { flex: 0 1 190px; font-weight: 600; }
.contact-hours dd { margin: 0; color: var(--color-text-muted); }
.contact { padding-bottom: max(var(--section-spacing), 100px); }
.whatsapp-floating { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: #25D366; color: var(--color-black); box-shadow: 0 4px 14px rgba(0,0,0,0.25); text-decoration: none; transition: background-color 200ms ease; }
.whatsapp-tooltip { display: none; position: absolute; right: calc(100% + 12px); padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-button); background: var(--color-surface); color: var(--color-text); font-size: 0.8125rem; white-space: nowrap; }
@media (min-width: 1400px) { .whatsapp-floating { right: max(24px, calc((100vw - 1280px) / 2 - 76px)); width: 56px; height: 56px; } }
@media (hover: hover) { .whatsapp-floating:hover { background: #20BD5A; } .whatsapp-floating:hover .whatsapp-tooltip { display: block; } }
.whatsapp-floating:focus-visible .whatsapp-tooltip { display: block; }
@media (prefers-reduced-motion: reduce) { .whatsapp-floating { transition: none; } }

/* Footer */
.site-footer { padding: clamp(3rem, 6vw, 5rem) 0 max(100px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-bg); font-size: 0.9375rem; }
.footer-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.footer-layout > * { min-width: 0; }
.footer-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 80px; object-fit: contain; margin-bottom: 1.5rem; }
.footer-brand p { max-width: 320px; margin: 0; color: var(--color-text-muted); }
.site-footer h2 { margin-bottom: 1.25rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; }
.footer-services ul, .footer-navigation ul { margin: 0; padding: 0; list-style: none; }
.footer-services a, .footer-navigation a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-muted); text-decoration: none; }
.footer-services a:hover, .footer-navigation a:hover { color: var(--color-white); text-decoration: underline; text-decoration-color: var(--color-accent); }
.footer-company { margin-bottom: 0.75rem; font-weight: 600; }
.footer-contact address { font-style: normal; color: var(--color-text-muted); }
.footer-contact dl, .footer-hours dl { display: grid; gap: 1rem; margin: 1.25rem 0 0; }
.footer-contact dt, .footer-hours dt { color: var(--color-text-muted); font-size: 0.8125rem; }
.footer-contact dd, .footer-hours dd { margin: 0; }
.footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.8125rem; }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-legal-column { flex-direction: column; align-items: flex-start; gap: 0; }
.footer-legal-column h2 { margin-bottom: 1.25rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-legal a[aria-disabled="true"] { cursor: default; }
@media (min-width: 640px) { .footer-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .footer-layout { grid-template-columns: 1.15fr 1.1fr 1.2fr 0.85fr; gap: 2rem; } }

/* Leistungs-Untermenü und Detailseite Textildruck & DTF. */
.navigation-submenu { list-style: none; margin: 0; padding: 0 0 0 1rem; }
.navigation-submenu a { font-size: 0.8125rem; }
@media (min-width: 1200px) {
  .navigation-services { position: relative; }
  .navigation-submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; padding: 0.75rem 1rem; background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-button); }
  .navigation-services:hover .navigation-submenu, .navigation-services:focus-within .navigation-submenu { display: block; }
}
.dtf-page { background: var(--color-bg); }
.dtf-page h1 span, .dtf-page h2 span { color: var(--color-accent); }
.dtf-page h1 { font-size: clamp(2rem, 4.5vw, 4rem); }
.dtf-page h2 { font-size: clamp(1.75rem, 3.5vw, 3.5rem); }
.dtf-page p { max-width: 680px; color: var(--color-text-muted); }
.dtf-two-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.dtf-two-columns > * { min-width: 0; }
.dtf-back { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 1.5rem; }
.dtf-eyebrow { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; letter-spacing: 0.1em; font-weight: 600; }
.dtf-eyebrow::before { content: ""; flex: 0 0 20px; height: 2px; background: var(--color-accent); }
.dtf-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.dtf-hero-image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.dtf-soft { background: var(--color-bg-soft); }
.dtf-benefits { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; }
.dtf-benefits li { display: flex; gap: 0.75rem; }
.dtf-benefits li::before { content: "✓"; color: var(--color-accent); }
.dtf-textiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.dtf-textiles li { padding-block: 1rem; border-bottom: 1px solid var(--color-border); }
.dtf-audiences { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2.5rem; }
.dtf-audiences article { min-width: 0; border-top: 2px solid var(--color-accent); padding-top: 1.5rem; }
.dtf-audiences h3 { font-size: 1.125rem; }
.dtf-process { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.dtf-process li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--color-border); }
.dtf-step { color: var(--color-accent); font-variant-numeric: tabular-nums; }
.dtf-process h3 { font-size: 1.25rem; }
.dtf-process p { margin: 0; }
@media (min-width: 700px) { .dtf-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dtf-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dtf-textiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* DTF und Flexdruck gleichwertig auf der Detailseite. */
.dtf-page .dtf-methods { align-items: stretch; margin-top: 2rem; }
.dtf-page .dtf-methods h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.dtf-page .dtf-method-advice { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.dtf-page .dtf-team-printing { margin: 2rem 0 0; }

/* Finale Textildruck-Detailinhalte; ausschließlich innerhalb der Detailseite. */
.dtf-page .dtf-textiles, .dtf-page .dtf-motif-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.dtf-page .dtf-textiles li, .dtf-page .dtf-motif-tiles li { display: flex; align-items: center; min-width: 0; min-height: 80px; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-button); background: var(--color-surface); font-weight: 600; }
.dtf-page .dtf-audiences article { border-top: 2px solid var(--color-accent); }
.dtf-page .dtf-audiences p { margin-bottom: 0; }
.dtf-page .dtf-process { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.dtf-page .dtf-process li { min-width: 0; padding: 1.5rem 0; }
.dtf-page .dtf-process h3 { font-size: 1rem; }
.dtf-page .dtf-step { font-size: 1.5rem; font-weight: 700; }
.dtf-artwork-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 2rem; }
.dtf-artwork-note > div { min-width: 0; flex: 1 1 400px; }
.dtf-artwork-note h3 { font-size: 1.125rem; }
.dtf-artwork-note p { margin: 0; font-size: 1rem; }
@media (max-width: 359px) { .dtf-page .dtf-textiles, .dtf-page .dtf-motif-tiles { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 700px) { .dtf-page .dtf-textiles, .dtf-page .dtf-motif-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .dtf-page .dtf-textiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dtf-page .dtf-motif-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dtf-page .dtf-process { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dtf-page .dtf-process li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1rem; border-top: 1px solid var(--color-border); border-bottom: 0; }
}

/* Drei gleichwertige Zielgruppen ausschließlich auf der Stickerei-Seite. */
@media (min-width: 700px) { .embroidery-page .embroidery-audiences { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.teamsport-page .teamsport-other-brands { margin: 3rem 0 0; font-size: clamp(1.25rem, 2vw, 1.75rem); }

/* JOMA-Schwerpunkt ausschließlich auf der Teamsport-Seite. */
.teamsport-page .teamsport-joma { background: var(--color-bg-soft); border-block: 1px solid var(--color-border); }
.teamsport-page .joma-benefit-layout { margin-top: 3rem; }
.teamsport-page .joma-statement { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.15; }
.teamsport-page .joma-statement span { color: var(--color-accent); }
.teamsport-page .joma-nos { margin-top: 2rem; font-size: 0.9375rem; }
.teamsport-page .joma-contract { margin-top: 3rem; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--color-bg); border-top: 2px solid var(--color-accent); }
.teamsport-page .joma-contract > h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.teamsport-page .joma-catalog-pending { cursor: default; opacity: 0.7; }
.teamsport-page .joma-catalog-status { font-size: 0.8125rem; margin: 0.75rem 0 0; }
@media (min-width: 1200px) { .teamsport-page .joma-contract-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Vertragsvorteile nur im JOMA-Hauptbereich. */
.teamsport-page .joma-sales-benefits { margin-top: 3rem; }
.teamsport-page .joma-benefits-heading, .teamsport-page .joma-sales-cta h3 { font-size: clamp(1.5rem, 2.8vw, 2.5rem); line-height: 1.2; }
.teamsport-page .joma-benefits-heading span, .teamsport-page .joma-sales-cta h3 span { color: var(--color-accent); }
.teamsport-page .joma-sales-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.teamsport-page .joma-sales-item { min-width: 0; padding: clamp(1.5rem, 2.5vw, 2rem); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.teamsport-page .joma-sales-number { display: block; margin-bottom: 1.25rem; color: var(--color-text-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.teamsport-page .joma-sales-item h4 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.3; }
.teamsport-page .joma-sales-item p { margin: 0; font-size: 1rem; }
.teamsport-page .joma-discount { display: block; color: var(--color-accent); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.1; margin-bottom: 0.5rem; }
.teamsport-page .joma-free-shop { color: var(--color-accent); }
.teamsport-page .joma-sales-cta { margin-top: 2.5rem; padding-block: 2rem; border-block: 1px solid var(--color-border); }
@media (min-width: 700px) { .teamsport-page .joma-sales-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .teamsport-page .joma-sales-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Arbeitsbekleidung: kompakte Bereichsreihen mit echten Produktfotos. */
.workwear-page .workwear-hero { padding-block: clamp(3rem,6vw,5rem); }
.workwear-hero-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; align-items:center; }
.workwear-page h1 { font-size:clamp(2rem,3.5vw,3.5rem); }
.workwear-page h2 { font-size:clamp(1.5rem,2.2vw,2.25rem); line-height:1.15; }
.workwear-page h3 { font-size:1rem; line-height:1.4; }
.workwear-page p { font-size:1rem; }
.workwear-page h1,.workwear-page h2,.workwear-page h3 { overflow-wrap:normal; hyphens:none; }
.workwear-hero-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.workwear-hero-products img { width:100%; height:clamp(180px,28vw,360px); object-fit:contain; background:#fff; padding:10px; border-radius:6px; }
.workwear-row { padding-block:2.5rem; border-top:1px solid var(--color-border); }
.workwear-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; }
.workwear-layout > div,.workwear-hero-layout > div { min-width:0; }
.workwear-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.workwear-tiles article { border:1px solid var(--color-border); border-radius:6px; padding:1.25rem; background:var(--color-bg-soft); }
.workwear-number { color:var(--color-accent); font-size:1rem; font-weight:700; display:block; margin-bottom:.75rem; }
.workwear-page .workwear-tiles p,.workwear-page .workwear-process p { font-size:.875rem; margin:0; }
.workwear-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.workwear-products figure { margin:0; border:1px solid var(--color-border); border-radius:5px; overflow:hidden; }
.workwear-products img { display:block; width:100%; height:190px; object-fit:contain; object-position:center; background:transparent; padding:8px; }
.workwear-products figcaption { display:flex; align-items:center; justify-content:center; height:64px; padding:12px 8px; font-size:.8125rem; line-height:1.25; font-weight:700; text-align:center; overflow-wrap:anywhere; }
.workwear-industries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); list-style:none; padding:0; margin:0; gap:10px; }
.workwear-industries li { padding:1.25rem .75rem; border:1px solid var(--color-border); border-top:2px solid var(--color-accent); font-size:.875rem; text-align:center; }
.workwear-process { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; list-style:none; padding:0; margin:0; }
.workwear-process li { min-width:0; border-top:1px solid var(--color-border); padding-top:1rem; }
.workwear-closing { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
@media(min-width:700px){ .workwear-products { grid-template-columns:repeat(3,minmax(0,1fr)); }.workwear-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }.workwear-industries { grid-template-columns:repeat(5,minmax(0,1fr)); }.workwear-process { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:1100px){ .workwear-hero-layout { grid-template-columns:1fr 1.1fr; }.workwear-layout { grid-template-columns:minmax(0,.7fr) minmax(0,2fr); }.workwear-products { grid-template-columns:repeat(5,minmax(0,1fr)); }.workwear-products img { height:170px; }.workwear-process { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:399px){ .workwear-tiles { grid-template-columns:minmax(0,1fr); }.workwear-hero-products { grid-template-columns:repeat(2,minmax(0,1fr)); }.workwear-hero-products img:last-child { grid-column:1/-1; height:240px; }.workwear-page .btn { width:100%; text-align:center; } }

/* Nur der Mitarbeiter-Hero der Arbeitsbekleidungsseite. */
.workwear-hero .workwear-hero-team { display:block; width:100%; height:auto; min-width:0; border-radius:var(--radius-card); }
.workwear-page .workwear-hero h1 { font-size:clamp(1.8rem,3.2vw,3.3rem); }
.workwear-hero .dtf-actions { flex-wrap:wrap; }
@media(min-width:1100px){ .workwear-hero .workwear-hero-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:2rem; } }
@media(max-width:599px){ .workwear-hero .btn { width:100%; text-align:center; }.workwear-hero .dtf-actions { align-items:stretch; } }

/* Sortimentshinweis unter der Produktübersicht. */
.workwear-page .workwear-more { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--color-border); }
.workwear-page .workwear-more h3 { font-size:1.125rem; }
.workwear-page .workwear-more h3 span { color:var(--color-accent); }
.workwear-page .workwear-more p { font-size:.9375rem; max-width:65ch; }
.workwear-more ul { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:1rem 0 0; }
.workwear-more li { padding:.375rem .625rem; border:1px solid var(--color-border); border-radius:4px; font-size:.8125rem; background:var(--color-bg-soft); }

/* Neutrale Shop-Demo ausschließlich auf der Bestellshop-Unterseite. */
.bestellshops-page .shop-hero-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:3rem; align-items:center; }
.bestellshops-page .shop-hero-layout > div { min-width:0; }
.shop-devices { position:relative; padding-bottom:2rem; padding-right:2rem; min-width:0; }
.demo-laptop { background:#252525; border:6px solid #252525; border-radius:12px; }
.demo-screen { color:#222; background:#f3f3f3; border-radius:6px; overflow:hidden; }
.demo-browser { display:flex; align-items:center; gap:5px; padding:8px 10px; background:#dedede; font-size:.55rem; }
.demo-browser i { width:5px; height:5px; background:#777; border-radius:50%; }.demo-browser i:first-child { background:var(--color-accent); }.demo-browser span { margin-left:8px; }
.demo-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; background:#151515; color:#fff; font-size:.75rem; }.demo-nav > span { padding:4px 6px; border:1px solid #777; font-size:.5rem; }
.demo-shop-content { padding:14px; }.bestellshops-page .demo-label { font-size:.55rem; color:#555; margin-bottom:7px; }.bestellshops-page .demo-shop-content h2 { font-size:1rem; color:#222; }
.demo-categories { display:flex; flex-wrap:wrap; gap:5px; margin:12px 0; }.demo-categories button,.demo-product button { cursor:pointer; font:inherit; font-size:.6rem; border:1px solid #ccc; padding:6px 8px; background:#fff; color:#222; border-radius:3px; }.demo-categories button[aria-pressed="true"] { background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.demo-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:360px; overflow-y:auto; padding:2px; }.demo-product { min-width:0; background:#fff; border:1px solid #ddd; padding:8px; }.demo-product[hidden] { display:none; }.demo-product-art { height:90px; display:flex; justify-content:center; align-items:center; background:#e9e9e9; }.demo-garment { height:100%; width:100%; max-width:95px; color:#333; }.bestellshops-page .demo-product h3 { font-size:.625rem; line-height:1.4; color:#222; margin:8px 0; overflow-wrap:anywhere; }.demo-product button { width:100%; }.demo-product:hover { border-color:#999; }.demo-product button:hover { border-color:var(--color-accent); }.bestellshops-page .demo-disclaimer { margin:12px 0 0; color:#555; font-size:.625rem; }
.demo-laptop-base { height:10px; margin:6px -12px -15px; border-radius:0 0 10px 10px; background:#454545; }
.demo-phone { position:absolute; right:0; bottom:0; width:125px; padding:10px; border:5px solid #292929; border-radius:20px; background:#f3f3f3; color:#222; }.demo-phone-camera { margin:0 auto 12px; height:5px; width:30px; border-radius:3px; background:#222; }.demo-phone strong { font-size:.65rem; }.bestellshops-page .demo-phone p { font-size:.5rem; margin:8px 0; color:#222; }.demo-phone-product { height:90px; background:#ddd; }.demo-phone > span { display:block; font-size:.6rem; margin-top:8px; }.demo-phone-select { background:var(--color-accent); color:#fff; padding:6px; text-align:center; border-radius:3px; }.demo-phone small { display:block; margin-top:8px; font-size:.45rem; }
.shop-option-list { list-style:none; padding:0; margin:2rem 0 0; }.shop-option-list li { display:grid; gap:.3rem; padding:1rem 0; border-bottom:1px solid var(--color-border); }.shop-option-list strong { font-size:.875rem; }.shop-option-list span { color:var(--color-text-muted); font-size:.9375rem; }
.demo-configuration { min-width:0; padding:clamp(1.25rem,3vw,2rem); border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-bg); }.demo-configuration label { display:block; margin:1rem 0; font-size:.875rem; }.demo-configuration select { display:block; width:100%; min-width:0; margin-top:.5rem; padding:.75rem; border:1px solid #555; border-radius:4px; background:#171717; color:#fff; font:inherit; }.demo-configuration small { color:var(--color-text-muted); }.demo-result { overflow-wrap:anywhere; }
.shop-use-cases { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; list-style:none; padding:0; margin:2rem 0 0; }.shop-use-cases li { border-left:2px solid var(--color-accent); padding:.75rem 1rem; background:var(--color-bg-soft); }
.bestellshops-page button:focus-visible,.bestellshops-page select:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
@media(min-width:700px){ .bestellshops-page .shop-audiences { grid-template-columns:repeat(3,minmax(0,1fr)); }.shop-use-cases { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:1200px){ .bestellshops-page .shop-hero-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); } }
@media(max-width:399px){ .demo-products { grid-template-columns:repeat(2,minmax(0,1fr)); }.demo-phone { position:relative; margin:24px 0 0 auto; }.shop-devices { padding-right:0; }.bestellshops-page .dtf-actions .btn { width:100%; text-align:center; } }

.bestellshops-page .demo-product-art img { display:block; width:100%; height:100%; object-fit:contain; padding:5px; }

/* Produktübersicht ausschließlich auf der Werbetechnik-Unterseite. */
.werbetechnik-page h1 { font-size:clamp(1.75rem,4vw,3.5rem); }
.advertising-products { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; margin-top:2.5rem; }
.advertising-products article { min-width:0; padding:1.75rem; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-bg-soft); }
.advertising-product-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; color:var(--color-accent); }
.advertising-product-top span { font-size:.8125rem; font-variant-numeric:tabular-nums; }
.advertising-product-top svg { width:40px; height:40px; }
.werbetechnik-page .advertising-products h3 { font-size:1.125rem; line-height:1.35; overflow-wrap:normal; hyphens:none; }
.werbetechnik-page .advertising-products p { font-size:.9375rem; margin-bottom:0; }
.advertising-more { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--color-border); }.advertising-more span { color:var(--color-accent); }
@media(min-width:700px){ .advertising-products { grid-template-columns:repeat(2,minmax(0,1fr)); }.werbetechnik-page .advertising-audiences { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:1200px){ .advertising-products { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:399px){ .werbetechnik-page .btn { width:100%; text-align:center; } }

/* Unveränderte Kunden-Bilddateien auf der Werbetechnik-Seite. */
.werbetechnik-page .advertising-products { grid-auto-rows:1fr; }
.werbetechnik-page .advertising-products article { display:flex; flex-direction:column; }
.advertising-product-image { display:block; width:100%; height:220px; object-fit:contain; object-position:center; border-radius:6px; margin-bottom:1.25rem; background:var(--color-bg); }
.advertising-visual-product .advertising-product-top { display:none; }
.advertising-applications { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; margin-top:2.5rem; }
.advertising-applications figure { min-width:0; margin:0; border:1px solid var(--color-border); border-radius:var(--radius-card); overflow:hidden; background:var(--color-bg); }
.advertising-applications img { display:block; width:100%; height:300px; object-fit:contain; object-position:center; }
.advertising-applications figcaption { padding:1.5rem; }.werbetechnik-page .advertising-applications h3 { font-size:1.125rem; line-height:1.35; margin:0; }
@media(min-width:1000px){ .advertising-applications { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.werbetechnik-page .advertising-example-note { max-width:70ch; font-size:.875rem; color:var(--color-text-muted); }
.advertising-example-note strong { color:var(--color-accent); }

/* 3D-LED-Leuchtreklame: vorhandene Seitenstruktur, eigene visuelle Details. */
.led-page h1 { font-size:clamp(1.75rem,3.5vw,3.5rem); }
.led-hero-image { display:block; width:100%; height:auto; border-radius:var(--radius-card); }
.led-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; margin-top:2rem; }
.led-cards article { min-width:0; padding:1.75rem; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:var(--radius-card); }
.led-page .led-cards h3 { font-size:1.125rem; line-height:1.35; }.led-page .led-cards p { font-size:.9375rem; margin-bottom:0; }
.led-number { display:block; color:var(--color-accent); font-size:.8125rem; margin-bottom:1rem; }
.led-tags { display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; padding:0; margin:2rem 0 0; list-style:none; }.led-tags li { padding:1rem; border-left:2px solid var(--color-accent); background:var(--color-bg-soft); min-width:0; }
.led-finishes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; list-style:none; padding:0; margin:2rem 0; }.led-finishes li { min-width:0; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-card); font-size:.875rem; }.led-swatch { display:block; height:60px; margin-bottom:1rem; border:1px solid #777; border-radius:4px; }.led-swatch-gold { background:#b79a56; }.led-swatch-silver { background:#aaa; }.led-swatch-black { background:#111; }.led-swatch-white { background:#eee; }.led-swatch-red { background:#d40012; }.led-swatch-brushed { background:#96938b; }.led-swatch-metal { background:#575d62; }
.led-page .led-small { font-size:.875rem; color:var(--color-text-muted); }.led-small strong { color:var(--color-accent); }
.led-gallery { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; margin:2rem 0 1rem; }.led-gallery-placeholder { display:flex; align-items:center; justify-content:center; min-height:220px; padding:1.5rem; text-align:center; font-size:.875rem; color:var(--color-text-muted); border:1px dashed var(--color-border); border-radius:var(--radius-card); background:var(--color-bg-soft); }
@media(min-width:700px){ .led-cards,.led-tags,.led-finishes { grid-template-columns:repeat(2,minmax(0,1fr)); }.led-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:1200px){ .led-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }.led-page .led-process { grid-template-columns:repeat(3,minmax(0,1fr)); }.led-finishes { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:399px){ .led-page .btn { width:100%; text-align:center; } }

/* Bildkarten und Beispielgalerie nur auf der LED-Seite. */
.led-card-image { display:block; width:100%; height:220px; object-fit:contain; background:var(--color-bg); border-radius:6px; margin-bottom:1.25rem; }
.led-page .led-cards article { display:flex; flex-direction:column; }
.led-example-gallery { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; margin:2.5rem 0 1.5rem; }
.led-example-gallery figure { margin:0; min-width:0; border:1px solid var(--color-border); border-radius:var(--radius-card); overflow:hidden; background:var(--color-bg-soft); }
.led-example-gallery .led-card-image { height:350px; margin:0; border-radius:0; }
.led-example-gallery figcaption { padding:1.25rem; font-size:.9375rem; font-weight:700; }
@media(min-width:700px){ .led-example-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Originalbilder ausschließlich in der LED-Galerie. */
.led-page .led-original-gallery figure { margin:0; min-width:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-bg-soft); }
.led-page .led-original-gallery img { display:block; width:100%; height:auto; aspect-ratio:1672 / 941; object-fit:contain; }
@media(min-width:700px) and (max-width:1199px) { .led-page .led-original-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Grafikservice: vorhandene Detailseiten-Komponenten und Originalbilder. */
.graphic-page .graphic-image { display:block; width:100%; max-width:100%; height:auto; border:1px solid var(--color-border); border-radius:var(--radius-card); }
.graphic-page .graphic-wide { margin-top:2rem; }
.graphic-page h1,.graphic-page h2,.graphic-page h3 { overflow-wrap:anywhere; }
.graphic-page .graphic-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:2rem; }
.graphic-page .graphic-cards article { min-width:0; padding:1.5rem; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-surface); }
.graphic-page .graphic-cards h3 { font-size:1rem; overflow-wrap:anywhere; }
.graphic-page .graphic-cards p { margin-bottom:0; }
.graphic-page .graphic-marker { display:flex; align-items:center; justify-content:space-between; color:var(--color-accent); margin-bottom:1.25rem; font-weight:700; }
.graphic-page .graphic-formats { display:flex; flex-wrap:wrap; gap:.75rem; list-style:none; padding:0; margin:2rem 0; }
.graphic-page .graphic-formats li { padding:.75rem 1.25rem; border:1px solid var(--color-border); border-radius:var(--radius-button); font-weight:700; }
@media(min-width:700px) { .graphic-page .graphic-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1200px) { .graphic-page .graphic-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:399px) { .graphic-page .btn { width:100%; text-align:center; } }
/* Optische Feinabstimmung ausschließlich der fertigen Grafikservice-Seite. */
.graphic-page .section { padding-block:clamp(3.5rem,6vw,5.5rem); }
.graphic-page .dtf-two-columns { grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,3vw,2.5rem); }
.graphic-page .graphic-image { width:100%; height:auto; object-fit:contain; }
@media(min-width:1200px) {
  .graphic-page .dtf-two-columns { grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); }
  .graphic-page [aria-labelledby="graphic-detail"] .dtf-two-columns { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }
}
/* Letzte Layout-Feinoptimierung nur innerhalb des Grafikservice-Inhalts. */
.graphic-page .container { container-type:inline-size; }
.graphic-page .dtf-two-columns > div,.graphic-page .graphic-cards article { container-type:inline-size; }
.graphic-page h1,.graphic-page h2,.graphic-page h3 { overflow-wrap:normal; word-break:normal; hyphens:none; }
.graphic-page h1 { font-size:min(clamp(2rem,4.5vw,4rem),7cqi); }
.graphic-page h2 { font-size:min(clamp(1.75rem,3.5vw,3.5rem),6cqi); }
.graphic-page .graphic-cards h3 { font-size:min(1rem,5.5cqi); overflow-wrap:normal; }
.graphic-page .dtf-process h3 { font-size:clamp(.75rem,3vw,1rem); }
@media(min-width:1440px) {
  .graphic-page .container { width:min(calc(100% - 2 * var(--page-gutter)),1440px); }
  .graphic-page .dtf-hero .dtf-two-columns,
  .graphic-page [aria-labelledby="graphic-check"] .dtf-two-columns,
  .graphic-page [aria-labelledby="graphic-production"] .dtf-two-columns { grid-template-columns:minmax(0,1fr) minmax(0,calc((1280px - clamp(1.75rem,3vw,2.5rem)) * .62)); }
  .graphic-page [aria-labelledby="graphic-detail"] .dtf-two-columns { width:1280px; max-width:calc(100% - 2 * var(--page-gutter)); }
  .graphic-page .graphic-wide { max-width:1280px; margin-inline:auto; }
}
/* Datenschutz-Auswahl und gesperrte externe Karte. */
.privacy-panel[hidden],.map-consent-placeholder[hidden],.contact-map[hidden] { display:none; }
.privacy-panel { position:fixed; z-index:1000; bottom:1rem; left:50%; transform:translateX(-50%); width:min(calc(100% - 2rem),820px); max-height:calc(100dvh - 2rem); overflow-y:auto; padding:1.5rem; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-bg-soft); box-shadow:0 12px 48px #0009; }
.privacy-panel h2 { font-size:1.25rem; }.privacy-panel p { color:var(--color-text-muted); font-size:.9375rem; }.privacy-actions { display:flex; flex-wrap:wrap; gap:.75rem; }.privacy-actions .btn { flex:1 1 240px; }
.privacy-settings { color:var(--color-text-muted); font:inherit; background:none; border:0; padding:.5rem 0; cursor:pointer; text-decoration:underline; }
.map-consent-placeholder { min-height:300px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1rem; padding:2rem; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); text-align:center; }
/* Rechtliche Seiten übernehmen Header, Footer und globale Gestaltung. */
.legal-page .legal-content { max-width:960px; }
.legal-page h1 { font-size:clamp(2rem,5vw,3.5rem); }
.legal-page h2 { font-size:clamp(1.25rem,2.5vw,1.75rem); margin-top:2rem; }
.legal-page p { color:var(--color-text-muted); }
.legal-page strong,.legal-page a { color:var(--color-text); }
.legal-page a { text-decoration:underline; text-underline-offset:.2em; }
.legal-page code { overflow-wrap:anywhere; }
/* Tastaturzugang ohne Änderung der sichtbaren Seitengestaltung. */
.skip-link { position:fixed; top:1rem; left:1rem; z-index:1100; transform:translateY(-200%); padding:.75rem 1.25rem; background:var(--color-bg-soft); color:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-button); }
.skip-link:focus { transform:none; }
#main-content:focus { outline:none; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { scroll-margin-block:110px; }
.privacy-panel a { display:inline-block; min-height:24px; }
.privacy-panel :focus-visible { outline-offset:2px; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
}
@media(max-height:600px) and (max-width:1199px) {
  .header-navigation { max-height:calc(100dvh - 80px); overflow-y:auto; }
}
/* Eigenständige JOMA-Präsentation ausschließlich im bestehenden Teamsport-Bereich. */
.teamsport-page .joma-premium { background:radial-gradient(ellipse at 85% 5%,rgba(227,6,19,.065),transparent 50%),linear-gradient(145deg,var(--color-bg-soft),var(--color-bg)); }
.teamsport-page .joma-premium-intro { max-width:900px; margin:0 auto 2.75rem; text-align:center; }
.teamsport-page .joma-premium-intro .dtf-eyebrow { justify-content:center; color:var(--color-accent); font-size:1.25rem; font-weight:700; }
.teamsport-page .joma-premium-intro h2 { font-size:clamp(2rem,4.5vw,4rem); overflow-wrap:normal; }
.teamsport-page .joma-premium-intro > p:last-child { max-width:740px; margin:1.5rem auto 0; }
.teamsport-page .joma-premium-grid { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:1fr; gap:1.25rem; padding:0; margin:0; list-style:none; }
.teamsport-page .joma-premium-card { min-width:0; display:flex; flex-direction:column; align-items:flex-start; position:relative; padding:clamp(1.5rem,3vw,2.5rem); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); transition:border-color 180ms ease,background-color 180ms ease; }
.teamsport-page .joma-premium-highlight { border-top:2px solid var(--color-accent); }
.teamsport-page .joma-premium-number { font-size:1.75rem; font-weight:700; line-height:1; color:var(--color-accent); margin-bottom:1.5rem; }
.teamsport-page .joma-premium-card h3 { font-size:clamp(1.125rem,2vw,1.625rem); line-height:1.25; overflow-wrap:normal; }
.teamsport-page .joma-premium-discount { display:block; font-size:clamp(3rem,5vw,4.5rem); color:var(--color-accent); line-height:1; margin-bottom:.75rem; }
.teamsport-page .joma-premium-card p { margin:0; font-size:1rem; }
.teamsport-page .joma-premium-extras { padding-block:2.5rem; margin-top:2.5rem; border-block:1px solid var(--color-border); }
.teamsport-page .joma-premium-extras > h3 { font-size:1rem; letter-spacing:.06em; margin-bottom:1.5rem; }
.teamsport-page .joma-premium-extras ul { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; list-style:none; padding:0; margin:0; }
.teamsport-page .joma-premium-extras li { min-width:0; border-left:2px solid var(--color-accent); padding-left:1rem; }
.teamsport-page .joma-premium-extras h4 { font-size:.9375rem; line-height:1.4; }
.teamsport-page .joma-premium-extras p { font-size:.9375rem; margin:0; }
.teamsport-page .joma-premium-flow { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem 1rem; padding:1.5rem 0; margin:0; list-style:none; font-size:.75rem; font-weight:600; color:var(--color-text-muted); }
.teamsport-page .joma-premium-flow li:not(:last-child)::after { content:'→'; margin-left:1rem; color:var(--color-text); }
.teamsport-page .joma-premium-cta { padding:clamp(1.5rem,3vw,2.5rem); margin-top:1rem; background:var(--color-bg-soft); border:1px solid var(--color-border); border-left:3px solid var(--color-accent); border-radius:var(--radius-card); }
.teamsport-page .joma-premium-cta h3 { font-size:clamp(1.125rem,2.5vw,2.5rem); line-height:1.2; overflow-wrap:normal; }
.teamsport-page .joma-premium-cta h3 span { color:var(--color-accent); }
.teamsport-page .joma-premium-cta p { max-width:800px; }
.teamsport-page .joma-premium-catalog { display:inline-flex; align-items:center; gap:.75rem; min-height:44px; margin-top:.75rem; font-size:.9375rem; color:var(--color-text-muted); text-decoration:underline; }
@media(min-width:700px) {
  .teamsport-page .joma-premium-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1000px) {
  .teamsport-page .joma-premium-extras ul { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .teamsport-page .joma-premium-card:hover { border-color:rgba(227,6,19,.5); background:var(--color-surface-hover); }
}
@media(max-width:699px) {
  .teamsport-page .joma-premium-contact .btn { width:100%; }
  .teamsport-page .joma-premium-cta { padding:1.25rem; }
}
/* Unverändertes, vom Nutzer bereitgestelltes Original-JOMA-Logo. */
.teamsport-page .joma-premium .joma-premium-logo { display:block; width:min(100%,440px); height:auto; margin:2rem auto; filter:brightness(0) invert(1); }
/* Bildorientierte Referenzen ausschließlich im Referenzbereich der Startseite. */
.references-showcase .references-heading { max-width:800px; }
.references-showcase .references-eyebrow { color:var(--color-accent); font-weight:700; font-size:1.25rem; }
.references-showcase .references-project-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; margin-top:2.5rem; }
.references-showcase .references-project { position:relative; isolation:isolate; min-width:0; margin:0; overflow:hidden; aspect-ratio:4 / 5; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-surface); transition:border-color 200ms ease; }
.references-showcase .references-project::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom,transparent 35%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.9) 100%); }
.references-showcase .references-project-image { display:block; width:100%; height:100%; object-fit:cover; transition:transform 250ms ease; }
.references-showcase .references-project-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:2rem; background:linear-gradient(145deg,var(--color-surface-hover),var(--color-bg-soft)); color:var(--color-text-muted); text-align:center; font-size:.875rem; }
.references-showcase .references-project-placeholder span { max-width:220px; padding-bottom:3rem; }
.references-showcase .references-project-number { position:absolute; top:1.25rem; left:1.5rem; z-index:2; color:var(--color-text-muted); font-size:.875rem; }
.references-showcase .references-project figcaption { position:absolute; inset:auto 0 0; z-index:2; padding:clamp(1.25rem,2.5vw,2rem); }
.references-showcase .references-project figcaption p { margin:0 0 .75rem; color:var(--color-text-muted); font-size:.75rem; font-weight:600; letter-spacing:.08em; }
.references-showcase .references-project h3 { margin:0; color:var(--color-white); font-size:clamp(1.25rem,2vw,1.75rem); line-height:1.2; overflow-wrap:normal; }
@media(min-width:700px) { .references-showcase .references-project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1100px) { .references-showcase .references-project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .references-showcase .references-project:hover { border-color:rgba(227,6,19,.55); }
  .references-showcase .references-project:hover .references-project-image { transform:scale(1.025); }
}
/* Freiwillige Kartenfreigabe und gut lesbare kleine Beschriftungen. */
.privacy-close { float:right; display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:44px; margin:-.5rem -.5rem .5rem .75rem; border:1px solid var(--color-border); border-radius:var(--radius-button); background:transparent; color:var(--color-text); font-size:1.5rem; cursor:pointer; }
.references-showcase .references-project-image { object-fit:contain; }
.references-showcase .references-project:has(.references-project-image)::after { background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.9) 100%); }
.dtf-step,.led-number,.joma-sales-number,.dtf-page .joma-free-shop { color:var(--color-text-muted); }
/* Vollständiges Leistungen-Untermenü: lange Bezeichnungen umbrechen sauber. */
.navigation-submenu a { white-space:normal; overflow-wrap:normal; }
@media(min-width:1200px) {
  .navigation-submenu { width:340px; max-width:calc(100vw - 40px); max-height:calc(100dvh - 120px); overflow-y:auto; }
}
@media(max-width:1199px) {
  .header-navigation { max-height:calc(100dvh - 88px); overflow-y:auto; }
}
/* Referenzkarten: gemeinsame Reihen für Nummer, vollständiges Bild und Text. */
.references-showcase .references-project {
  display:grid;
  grid-template-rows:auto auto 1fr;
  aspect-ratio:auto;
}
.references-showcase .references-project::after { display:none; }
.references-showcase .references-project-number {
  position:static;
  grid-row:1;
  padding:1.25rem 1.5rem .75rem;
}
.references-showcase .references-project-image {
  grid-row:2;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:contain;
  object-position:center;
}
.references-showcase .references-project figcaption {
  position:static;
  grid-row:3;
  min-height:10rem;
  padding:clamp(1.25rem,2.5vw,2rem);
  background:var(--color-surface);
}
.references-showcase .references-project:hover .references-project-image { transform:none; }

/* Bildlinks behalten die bisherigen Kartenmaße bei. */
.service-image-link { display: block; flex: 0 0 auto; width: 100%; border-radius: 0.375rem; margin-bottom: 1.5rem; }
.service-image-link .service-image { margin-bottom: 0; }
.service-image-link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
/* Hauptnavigation auf Desktop exakt zur Seitenmitte ausrichten. */
@media (min-width: 1200px) {
  .site-header .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; }
  .site-header .header-brand { justify-self: start; }
  .site-header .header-navigation { display: contents; }
  .site-header .navigation-list { justify-content: center; gap: clamp(0.5rem, 0.7vw, 0.75rem); }
  .site-header .header-cta { justify-self: end; }
}
/* JOMA-Einstieg: klare Größenhierarchie und ausgewogene Markenpräsentation. */
.teamsport-page .joma-premium-intro {
  max-width: 1160px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.teamsport-page .joma-premium-intro .dtf-eyebrow {
  font-size: .875rem;
  letter-spacing: .12em;
  margin-bottom: 1.25rem;
}
.teamsport-page .joma-premium-intro h2 {
  font-size: clamp(2.25rem, 4.4vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
  word-break: normal;
  hyphens: none;
}
.teamsport-page .joma-premium-intro > p:last-child {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.75;
  max-width: 650px;
  margin: 1.5rem auto 0;
}
.teamsport-page .joma-premium .joma-premium-logo {
  width: min(80%, 380px);
  height: auto;
  margin: 2rem auto;
}
@media (min-width: 1000px) {
  .teamsport-page .joma-premium-intro {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    text-align: left;
    align-items: center;
  }
  .teamsport-page .joma-premium-intro .dtf-eyebrow { grid-column: 1 / -1; justify-content: flex-start; }
  .teamsport-page .joma-premium-intro h2 { grid-column: 1; grid-row: 2 / 4; }
  .teamsport-page .joma-premium .joma-premium-logo { grid-column: 2; grid-row: 2; width: min(100%, 380px); margin: .5rem 0 1.5rem; }
  .teamsport-page .joma-premium-intro > p:last-child { grid-column: 2; grid-row: 3; margin: 0; }
}

#joma-request-dialog { width:min(640px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; padding:clamp(20px,4vw,36px); background:var(--color-bg-soft); color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius-card); }
#joma-request-dialog::backdrop { background:rgba(0,0,0,.8); }
#joma-request-dialog h2 { font-size:2rem; margin-bottom:1rem; }
.joma-request-close { display:block; margin:0 0 20px auto; padding:10px; background:transparent; color:inherit; border:1px solid var(--color-border); border-radius:6px; cursor:pointer; }
#joma-request-form label { display:block; margin-block:16px; font-size:1rem; }
#joma-request-form input:not([type=checkbox]),#joma-request-form textarea { display:block; width:100%; min-width:0; margin-top:8px; padding:12px; font:inherit; line-height:1.5; color:var(--color-text); background:var(--color-bg); border:1px solid #666; border-radius:6px; }
#joma-request-form textarea { resize:vertical; }
.joma-request-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#joma-request-form .joma-request-privacy { display:flex; align-items:flex-start; gap:12px; line-height:1.6; }
.joma-request-privacy input { margin-top:6px; width:20px; height:20px; flex-shrink:0; }
.joma-request-status { line-height:1.6; }
@media(max-width:480px) { .joma-request-fields { grid-template-columns:1fr; gap:0; } #joma-request-form .btn { width:100%; } }

/* Vereins-Shop-Vergleich: echte Texte statt kleiner Schrift in einer Bildgrafik. */
.shop-benefit-comparison { background:var(--color-bg); }
.shop-comparison-heading { max-width:900px; margin-bottom:clamp(28px,4vw,48px); }
.shop-comparison-heading h2 { font-size:clamp(2rem,4vw,3.5rem); line-height:1.12; letter-spacing:-.025em; overflow-wrap:normal; word-break:normal; hyphens:none; }
.shop-comparison-heading h2 span { color:var(--color-accent); }
.shop-comparison-heading>p:last-child { max-width:680px; font-size:1.125rem; line-height:1.7; margin-top:1.25rem; }
.shop-comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.shop-comparison-card { min-width:0; padding:clamp(24px,3vw,40px); border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-bg-soft); }
.shop-comparison-card-featured { border-top:3px solid var(--color-accent); }
.shop-comparison-card-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.shop-comparison-label { color:var(--color-text-muted); font-size:.75rem; letter-spacing:.1em; font-weight:700; }
.shop-comparison-card-featured .shop-comparison-label { color:var(--color-text); }
.shop-comparison-number { font-size:.875rem; color:var(--color-text-muted); }
.shop-comparison-card h3 { font-size:clamp(1.5rem,2.2vw,2rem); line-height:1.2; overflow-wrap:normal; word-break:normal; hyphens:none; margin-bottom:12px; }
.shop-comparison-subtitle { color:var(--color-text-muted); font-size:1rem; margin-bottom:24px; }
.shop-comparison-list { list-style:none; padding:0; margin:0; }
.shop-comparison-list li { display:flex; align-items:flex-start; gap:14px; border-top:1px solid var(--color-border); padding:16px 0; font-size:1.0625rem; line-height:1.55; }
.shop-comparison-list li:last-child { padding-bottom:0; }
.shop-comparison-list li>span { color:var(--color-accent); width:20px; flex:0 0 20px; font-weight:700; }
.shop-comparison-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:32px; }
.shop-comparison-bottom p { margin:0; color:var(--color-text-muted); line-height:1.7; }
.shop-comparison-bottom strong { color:var(--color-text); font-weight:600; }
@media(max-width:760px) { .shop-comparison-grid { grid-template-columns:1fr; gap:20px; } .shop-comparison-bottom { flex-direction:column; align-items:flex-start; } .shop-comparison-bottom .btn { width:100%; } }

.company-shop-explanation{display:flex;align-items:center;justify-content:space-between;gap:32px;border:1px solid var(--color-border);border-radius:var(--radius-card);padding:clamp(24px,3vw,40px);margin-top:24px;background:var(--color-bg-soft)}.company-shop-explanation>div{max-width:740px}.company-shop-explanation h3{font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.25}.company-shop-explanation p{line-height:1.7}.company-shop-explanation .btn{flex-shrink:0}@media(max-width:900px){.company-shop-explanation{flex-direction:column;align-items:flex-start}.company-shop-explanation .btn{width:100%}}