/* =====================================================================
   CCTC Europe – Design System
   Visual language aligned with the parent company site cctc-pcb.com:
   white / light-grey canvas, CCTC red accents and pill buttons, a cool
   blue-grey slate hero and footer, Montserrat headings and labels with
   Open Sans body copy. The overlapping photo collages with solid colour
   blocks and the red rule lines leading into headings are kept as the
   site's own compositional signature.
   ---------------------------------------------------------------------
   Contents
     01  Tokens
     02  Base / reset
     03  Layout helpers
     04  Typography
     05  Buttons & links
     06  Sections (light / alternate backgrounds)
     07  Preloader
     08  Header & navigation
     09  Brand, mark & logo lockup
     10  Photos & collages
     11  Home – hero
     12  Home – sections
     13  Tabs ("menu" list)
     14  Panels, icon lists & forms
     15  Map
     16  CTA card
     17  Page hero (sub pages)
     18  Sub-page components (stats, cards, tables, news, legal …)
     19  Footer
     20  Reveal animations
     21  Responsive
     22  Reduced motion / print
   ===================================================================== */

/* ---------------------------------------------------------------------
   01  Tokens
   --------------------------------------------------------------------- */
:root {
  /* colour – canvas & neutrals */
  --c-white:       #ffffff;
  --c-bg:          #ffffff;   /* page canvas                       */
  --c-bg-alt:      #fafafa;   /* alternate sections, page hero     */
  --c-panel:       #f5f5f5;   /* panels, placeholders              */
  --c-grey-block:  #e9e9e9;   /* light grey colour blocks          */
  --c-line:        #e5e5e5;   /* hairlines                         */
  --c-line-strong: #d8d8d8;

  /* colour – text */
  --c-heading:     #333333;
  --c-text-strong: #444444;
  --c-text:        #666666;   /* body copy                         */
  --c-muted:       #707070;   /* secondary text – ≥4.5:1 on #fff / #fafafa / #f5f5f5 */

  /* colour – brand red */
  --c-red:         #cc3333;   /* primary UI red                    */
  --c-red-dark:    #a82828;   /* hover / pressed                   */
  --c-red-bright:  #e1132d;   /* thin brand stripes                */
  --c-red-on-dark: #ff6b6b;   /* red large text / icons on slate (≥3:1) */
  --c-red-on-slate:#ff8a8a;   /* red SMALL text on slate (≥4.5:1 on both slates) */
  --c-brand:       #c8161d;   /* CCTC monogram                     */

  /* colour – slate (hero, footer) */
  --c-slate:       #3b3d40;   /* footer                            */
  --c-slate-2:     #363a43;   /* copyright bar                     */
  --c-slate-text:  #a9aeb4;   /* text on slate (≥4.5:1 on --c-slate) */
  --c-hero-a:      #262b33;   /* hero gradient start               */
  --c-hero-b:      #3a4351;   /* hero gradient mid                 */
  --c-hero-c:      #5a6a80;   /* hero gradient end                 */

  /* type */
  --f-head: 'Montserrat', Arial, Helvetica, sans-serif;
  --f-body: 'Open Sans', Arial, Helvetica, sans-serif;

  /* layout */
  --container:        1200px;
  --container-wide:   1320px;
  --container-narrow: 860px;
  --gutter:           clamp(16px, 4vw, 48px);
  --header-h:         84px;
  --header-h-sm:      68px;
  --section-y:        clamp(72px, 10vw, 140px);

  /* motion */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
}

/* ---------------------------------------------------------------------
   02  Base / reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h-sm);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open { overflow: hidden; }

img, svg, video, iframe { display: block; max-width: 100%; }
figure { margin: 0; }

a {
  color: var(--c-red);
  text-decoration: none;
  transition: color .25s ease;
}
a:hover { color: var(--c-red-dark); }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-heading);
}
p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
em, i { font-style: normal; }

::selection { background: var(--c-red); color: var(--c-white); }

:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 2000;
  padding: .7rem 1.2rem;
  border-radius: 30px;
  background: var(--c-red);
  color: var(--c-white);
  font-family: var(--f-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; color: var(--c-white); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* language switch fade (used by js/i18n.js) */
[data-i18n], [data-i18n-html] { transition: opacity .14s ease; }
.lang-transition [data-i18n],
.lang-transition [data-i18n-html] { opacity: 0; }

/* ---------------------------------------------------------------------
   03  Layout helpers
   --------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--wide   { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

main, .site-footer { position: relative; z-index: 1; }

.section        { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top    { padding-top: 0; }

/* 12/12 split used by the "image collage + text" sections */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--top  { align-items: start; }

.stack > * + * { margin-top: 1.5rem; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* ---------------------------------------------------------------------
   04  Typography
   --------------------------------------------------------------------- */

/* Big headline (hero / page hero) – bold uppercase like cctc-pcb.com */
.display {
  font-family: var(--f-head);
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .03em;
  color: var(--c-heading);
  text-transform: uppercase;
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-wrap: balance;
}
.display--md { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }

/* Small red line under a headline ("seit 1999", "aus Shantou" …) */
.display__sub {
  display: block;
  margin-top: .5em;
  font-family: var(--f-head);
  font-size: .4em;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-red);
}

/* Red emphasis inside a headline */
.accent {
  color: var(--c-red);
  font-style: normal;
}

/* Section heading – bold, sentence case */
.title {
  position: relative;
  font-family: var(--f-head);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-heading);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.title--sm { font-size: clamp(1.35rem, 2vw, 1.6rem); }

/* Red rule leading into a heading from the left (site signature) */
.title--line { padding-left: 0; }
.title--line::before {
  content: '';
  position: absolute;
  top: .55em;
  right: calc(100% + 18px);
  width: clamp(48px, 7vw, 110px);
  height: 3px;
  background: var(--c-red);
  transform-origin: right center;
  transition: transform 1s var(--ease-out) .15s;
}
[data-animate].title--line::before,
[data-animate] .title--line::before { transform: scaleX(0); }
.is-visible.title--line::before,
.is-visible .title--line::before { transform: scaleX(1); }

/* Red bar centred below a heading (used on centred sections) */
.title--center { text-align: center; }
.title--center::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 18px auto 0;
  background: var(--c-red);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--f-head);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-red);
}

.subtitle {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-heading);
  line-height: 1.3;
}

.lead {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--c-text-strong);
}

.prose p:not([class]) { color: var(--c-text); }
.prose strong, .prose b, .hl {
  color: var(--c-heading);
  font-weight: 700;
}
.prose em.hl, .hl-i {
  color: var(--c-red);
  font-weight: 600;
  font-style: normal;
}
/* plain inline links only – buttons and icon links keep their own borders */
.prose a:not([class]) { color: var(--c-red); border-bottom: 1px solid rgba(204, 51, 51, .3); }
.prose a:not([class]):hover { color: var(--c-red-dark); border-color: var(--c-red-dark); }

.muted { color: var(--c-muted); }
.small { font-size: .82rem; }

/* Horizontal rules framing a label ("Leiterplatten-Kompetenz seit 1999") */
.ruled {
  display: inline-block;
  padding: 1.1rem 1.6rem;
  text-align: center;
  font-family: var(--f-head);
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .12em;
  color: var(--c-heading);
  text-transform: uppercase;
  border-top: 2px solid var(--c-red);
  border-bottom: 2px solid var(--c-red);
}

/* ---------------------------------------------------------------------
   05  Buttons & links
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .8rem 2rem .78rem;
  border: 2px solid var(--c-red);
  border-radius: 30px;
  background: transparent;
  color: var(--c-red);
  font-family: var(--f-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.btn:hover { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); }

.btn--solid {
  background: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-white);
}
.btn--solid:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); color: var(--c-white); }

.btn--sm { padding: .66rem 1.4rem .64rem; font-size: .72rem; letter-spacing: .16em; }

.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

/* Small text link with icon + underline ("Mehr erfahren") */
.link-icon {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--c-red);
  font-family: var(--f-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-red);
}
.link-icon svg { width: 14px; height: 14px; }
.link-icon:hover { color: var(--c-heading); border-color: var(--c-heading); }

/* Arrow link inside prose */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--c-red);
  text-transform: uppercase;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.link-arrow:hover { color: var(--c-red-dark); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------------------------------------------------------------------
   06  Sections – light canvas with alternate grey bands
   --------------------------------------------------------------------- */
.section--alt,
.section--panel { background: var(--c-bg-alt); }
.section--alt .panel,
.section--panel .panel { background: var(--c-white); }

/* ---------------------------------------------------------------------
   07  Preloader – logo lockup fading in with a growing red line
   --------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.8rem;
  background: var(--c-white);
  color: var(--c-heading);
  transition: opacity .7s var(--ease-io), visibility .7s;
}
.preloader::after {                  /* thin red line growing under the logo */
  content: '';
  width: 140px;
  height: 2px;
  background: var(--c-red-bright);
  transform: scaleX(0);
  animation: preloader-line 1s var(--ease-io) .35s forwards;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
html.preloader-skip .preloader,
html:not(.js) .preloader { display: none; }

.preloader .logo { animation: preloader-logo .9s var(--ease-out) .1s both; }
.preloader .logo--stacked .logo__mark { width: 76px; height: 76px; }
.preloader .logo__name { font-size: 2.5rem; }
.preloader .logo__sub  { font-size: .78rem; margin-top: .45rem; }
.preloader .logo__loc  { font-size: .7rem; margin-top: .45rem; }
@keyframes preloader-logo {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes preloader-line {
  to { transform: scaleX(1); }
}

/* ---------------------------------------------------------------------
   08  Header & navigation
   --------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-white);
  border-top: 3px solid var(--c-red-bright);
  border-bottom: 1px solid var(--c-line);
  transition: height .4s var(--ease-out), box-shadow .4s;
}
.site-header.is-scrolled {
  height: var(--header-h-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

.site-header__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 3rem);
  padding-inline: clamp(16px, 2.6vw, 40px);
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.2rem);
  list-style: none;
}
.main-nav__link {
  position: relative;
  display: inline-block;
  padding: .45rem 0;
  font-family: var(--f-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  color: var(--c-heading);
  text-transform: uppercase;
  white-space: nowrap;
}
.main-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--c-red);
  transform: scaleX(0);
  transition: transform .3s var(--ease-out);
}
.main-nav__link:hover { color: var(--c-red); }
.main-nav__link.is-active { color: var(--c-red); }
.main-nav__link.is-active::after { transform: scaleX(1); }
.main-nav__extras { display: none; }

.header-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 1.4vw, 1.4rem);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--f-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
}
.lang-switch a { color: var(--c-muted); padding: .25rem 0; }
.lang-switch a:hover { color: var(--c-heading); }
.lang-switch a.active { color: var(--c-red); }
.lang-switch__sep { color: var(--c-line-strong); }

.social-link {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--c-heading);
}
.social-link svg { width: 16px; height: 16px; }
.social-link:hover { color: var(--c-red); }

.btn-phone {
  display: inline-flex;
  align-items: center;
  padding: .68rem 1.2rem .64rem;
  border: 1px solid var(--c-red);
  border-radius: 30px;
  font-family: var(--f-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--c-red);
  white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.btn-phone:hover { background: var(--c-red); color: var(--c-white); }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--c-heading);
  transition: transform .35s var(--ease-out), opacity .2s, top .35s var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------------------------------------------------------------------
   09  Brand, mark & logo lockup
   --------------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  color: var(--c-heading);
}
.brand:hover { color: var(--c-heading); }
.brand__mark {
  width: 46px;
  height: 46px;
  transition: width .4s var(--ease-out), height .4s var(--ease-out);
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  transition: opacity .3s, transform .4s var(--ease-out);
}
.brand__name {
  font-family: var(--f-head);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-heading);
  transition: font-size .4s var(--ease-out);
}
.brand__sub {
  margin-top: .25rem;
  font-family: var(--f-head);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .42em;
  color: var(--c-red);
}
.is-scrolled .brand__mark { width: 38px; height: 38px; }
.is-scrolled .brand__name { font-size: 1.32rem; }
.is-scrolled .brand__sub  { font-size: .54rem; }
/* Header logo: image lockup of the legacy site (red adapted to --c-brand), monogram only on small phones */
.brand--logo { gap: 0; }
.brand--logo picture { display: block; line-height: 0; }
.brand__logo { display: block; width: auto; height: 46px; transition: height .4s var(--ease-out); }
.is-scrolled .brand__logo { height: 38px; }

/* CCTC monogram (inline SVG – uses currentColor for the "board") */
.mark { color: var(--c-brand); }

/* Logo lockup: monogram + CCTC / EUROPE / ERLANGEN (preloader, footer) */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--c-heading);
  text-align: left;
}
.logo__mark {
  width: 48px;
  height: 48px;
  color: var(--c-brand);
  --mark-fill: #fff;
  flex-shrink: 0;
}
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font: 700 1.9rem/1 var(--f-head);
  letter-spacing: .04em;
}
.logo__sub {
  margin-top: .3rem;
  font: 600 .68rem/1 var(--f-head);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--c-red);
}
.logo__loc {
  margin-top: .3rem;
  font: 400 .64rem/1 var(--f-head);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.logo--stacked { flex-direction: column; text-align: center; }
.logo--stacked .logo__text { align-items: center; }
.logo--stacked .logo__mark { width: 64px; height: 64px; }
/* letter-spaced words carry trailing space – pull it back so they centre */
.logo--stacked .logo__sub { margin-right: -.42em; }
.logo--stacked .logo__loc { margin-right: -.3em; }

/* ---------------------------------------------------------------------
   10  Photos & collages
   --------------------------------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  background: #eeeeee;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
  transition: transform 1.4s var(--ease-out), filter .6s;
}
.photo:hover img { transform: scale(1.035); }
.photo--shadow { box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .35); }

/* Solid colour block sitting behind photos */
.block {
  position: absolute;
  background: var(--c-red);
}
.block--tan  { background: var(--c-grey-block); }
.block--dark { background: var(--c-slate); }

/* Red square tile carrying the logo */
.tile {
  position: absolute;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .5rem;
  background: var(--c-red);
  color: var(--c-white);
  text-align: center;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .4);
}
.tile .mark { width: 42%; height: auto; aspect-ratio: 1; color: var(--c-white); }
.tile__label {
  font-family: var(--f-head);
  font-size: clamp(.95rem, 1.4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}
.tile__sub {
  margin-top: -.15rem;
  font-family: var(--f-head);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.2;
}

/* Collage container: children are absolutely positioned on desktop */
.collage { position: relative; }
.collage > * { position: absolute; }

/* "duo": colour block top, small photo left, large photo right (in front) */
.collage--duo { aspect-ratio: 1 / .92; }
.collage--duo .block   { left: 37%; top: 0;   width: 41%; height: 30%; }
.collage--duo .c-a     { left: 0;   top: 17%; width: 40%; height: 62%; z-index: 1; }
.collage--duo .c-b     { left: 31%; top: 13%; width: 63%; height: 87%; z-index: 2; }

/* "stack": large photo top-left, second photo overlapping bottom */
.collage--stack { aspect-ratio: 1 / .98; }
.collage--stack .c-a   { left: 0;   top: 0;   width: 84%; height: 58%; z-index: 1; }
.collage--stack .c-b   { left: 27%; top: 48%; width: 52%; height: 52%; z-index: 2; }
.collage--stack .block { left: 70%; top: 40%; width: 22%; height: 26%; z-index: 0; }

/* "wide": tall grey block left, wide photo, small photo right, logo tile */
.collage--wide { aspect-ratio: 1 / .5; }
.collage--wide .block  { left: 0;   top: 0;   width: 18%; height: 82%; }
.collage--wide .c-a    { left: 8%;  top: 9%;  width: 64%; height: 91%; z-index: 1; }
.collage--wide .c-b    { left: 63%; top: 31%; width: 37%; height: 46%; z-index: 2; }
.collage--wide .tile   { left: 14%; top: 66%; width: 17%; aspect-ratio: 1; z-index: 3; }

/* "pair": two photos flanking content (CTA card) – positioned per element */

/* Circuit-trace placeholder artwork (for missing photography/charts) */
.artwork {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .9), transparent 55%),
    var(--c-panel);
  border: 1px solid var(--c-line);
  text-align: center;
}
.artwork::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23cc3333' stroke-width='1.4' opacity='.55'%3E%3Cpath d='M0 40h40l20 20h40l20-20h40M0 120h30l20-20h20M90 160v-30l20-20h50M40 0v20l20 20M120 0v30'/%3E%3Ccircle cx='60' cy='60' r='4'/%3E%3Ccircle cx='100' cy='60' r='4'/%3E%3Ccircle cx='70' cy='100' r='4'/%3E%3Ccircle cx='110' cy='110' r='4'/%3E%3Ccircle cx='60' cy='40' r='3'/%3E%3Ccircle cx='120' cy='30' r='3'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .14;
}
.artwork > * { position: relative; }
.artwork__icon { width: 44px; height: 44px; color: var(--c-red); margin: 0 auto .75rem; }
.artwork__label {
  font-family: var(--f-head);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-heading);
  text-transform: uppercase;
}
.artwork__note { margin-top: .35rem; font-size: .8rem; line-height: 1.4; color: var(--c-muted); }
/* an .artwork can stand in for a photo inside a collage slot or a video frame */
.collage > .artwork { position: absolute; min-height: 0; padding: 1.25rem; }
.video .artwork { min-height: 0; padding: clamp(1rem, 4vw, 2rem); }

/* ---------------------------------------------------------------------
   11  Home – hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(24px, 4vw, 56px));
  padding-bottom: clamp(40px, 6vw, 90px);
  background: linear-gradient(135deg, var(--c-hero-a) 0%, var(--c-hero-b) 55%, var(--c-hero-c) 100%);
  border-bottom: 6px solid var(--c-red-bright);
  color: var(--c-white);
}
.hero::before {                      /* very subtle white circuit traces */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 160 160' fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M0 40h40l20 20h40l20-20h40M0 120h30l20-20h20M90 160v-30l20-20h50M40 0v20l20 20M120 0v30'/%3E%3Ccircle cx='60' cy='60' r='4'/%3E%3Ccircle cx='100' cy='60' r='4'/%3E%3Ccircle cx='70' cy='100' r='4'/%3E%3Ccircle cx='110' cy='110' r='4'/%3E%3Ccircle cx='60' cy='40' r='3'/%3E%3Ccircle cx='120' cy='30' r='3'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .05;
  pointer-events: none;
}
/* 12-column composition: photo A top-left, headline overlapping it,
   info block below the headline, photo B overlapping A bottom-right,
   ruled tagline left of photo B */
.hero__frame {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  width: min(100% - 2 * var(--gutter), 1240px);
  margin-inline: auto;
}
.hero__media-a {
  grid-column: 2 / 7;
  grid-row: 1 / 3;
  height: clamp(520px, 72vh, 660px);
}
.hero__media-b {
  grid-column: 7 / 13;
  grid-row: 3;
  height: clamp(320px, 36vw, 480px);
  margin-top: -64px;
  margin-left: clamp(-64px, -4vw, -24px);
  z-index: 2;
}
.hero__heading {
  position: relative;
  grid-column: 5 / 13;
  grid-row: 1;
  align-self: start;
  --hero-pad: clamp(120px, 20vh, 200px);
  padding-top: var(--hero-pad);
  z-index: 3;
}
.hero .display {
  color: var(--c-white);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero .accent { color: var(--c-red-on-dark); }
/* desktop collage: the heading column is ~57% of the frame – size the headline so
   its first line („Qualität, auf die Sie sich“) fits and the authored <br> holds */
@media (min-width: 1025px) {
  .hero .display { font-size: clamp(2.2rem, 3.6vw, 3.3rem); }
}
.hero__info {
  position: relative;
  grid-column: 8 / 13;
  grid-row: 2;
  align-self: start;
  padding: 2.6rem 0 7rem;
  z-index: 3;
}
.hero__tag {
  position: relative;
  grid-column: 2 / 6;
  grid-row: 3;
  align-self: center;
  z-index: 3;
}
.hero .ruled { color: var(--c-white); border-color: var(--c-red-on-dark); }

/* Icon list in small caps (hero address / facts block, kontakt page hero) */
.info-list { list-style: none; display: grid; gap: 1.7rem; }
.info-list li { display: grid; grid-template-columns: 22px 1fr; gap: 1rem; align-items: start; }
.info-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--c-red); }
.info-list p {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 500;
  font-size: .86rem;
  line-height: 1.75;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-strong);
  overflow-wrap: anywhere;
}
.info-list .gold { color: var(--c-red); font-weight: 600; }
.info-list a { color: var(--c-heading); }
.info-list a:hover { color: var(--c-red); }
/* addresses read better in their natural case */
.info-list a[href^="mailto:"],
.info-list a[href^="http"] { text-transform: none; letter-spacing: .02em; }
/* on the dark home hero */
.hero .info-list svg { color: var(--c-red-on-dark); }
.hero .info-list p,
.hero .info-list a { color: var(--c-white); }
/* small labels: red is too weak on the slate gradient – white bold instead */
.hero .info-list .gold { color: var(--c-white); font-weight: 700; }
.hero .info-list a:hover { color: var(--c-red-on-dark); }

/* ---------------------------------------------------------------------
   12  Home – sections
   --------------------------------------------------------------------- */
.about-text { max-width: 460px; }
.about-text .title { margin-bottom: 1.8rem; }

.who {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.who__text { position: relative; max-width: 460px; }
.who__text .title { margin-bottom: 1.8rem; }

.parent { position: relative; }
.parent__text {
  max-width: 680px;
  margin: clamp(48px, 6vw, 80px) 0 0 clamp(0px, 10vw, 140px);
}
.parent__text .title { margin-bottom: 1.8rem; }
.parent__text .btn-group { margin-top: 2.5rem; }

/* News teaser cards (home + news page) */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .3);
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -24px rgba(0, 0, 0, .35); }
.news-card__media { position: relative; aspect-ratio: 16 / 9; }
.news-card__media .photo, .news-card__media .artwork { position: absolute; inset: 0; min-height: 0; }
.news-card__body { display: flex; flex-direction: column; flex: 1; padding: 2rem 2rem 2.2rem; }
.news-card__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  font-family: var(--f-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-red);
}
.news-card__meta::before { content: ''; width: 28px; height: 2px; background: var(--c-red); }
.news-card__title {
  margin-bottom: 1rem;
  font-family: var(--f-head);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-heading);
  -webkit-hyphens: auto;
  hyphens: auto;
}
.news-card__body p:not(.news-card__meta) { font-size: .93rem; color: var(--c-text); }
.news-card__body .link-icon { margin-top: auto; align-self: flex-start; }
.news-card__body p + .link-icon { margin-top: 1.5rem; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.section-head .title--line { margin-left: clamp(60px, 8vw, 130px); }

/* ---------------------------------------------------------------------
   13  Tabs – the "menu" list (vertical tabs + spec rows)
   --------------------------------------------------------------------- */
.tabs {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  grid-template-rows: auto 1fr;
  max-width: 940px;
  margin-inline: auto;
}
.tabs__head {
  grid-column: 1;
  text-align: right;
  margin-bottom: 2.4rem;
}
.tabs__list {
  grid-column: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.4rem;
  list-style: none;
}
.tabs__tab {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: right;
  font-family: var(--f-head);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color .25s;
}
.tabs__tab::before {
  content: '';
  position: absolute;
  right: calc(100% + 12px);
  top: .62em;
  width: 22px;
  height: 2px;
  background: var(--c-red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.tabs__tab:hover { color: var(--c-heading); }
.tabs__tab[aria-selected="true"] { color: var(--c-red); }
.tabs__tab[aria-selected="true"]::before { transform: scaleX(1); }

.tabs__panels { grid-column: 2; grid-row: 1 / span 2; padding-top: calc(2.4rem + 2.6rem); }
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: panel-in .55s var(--ease-out); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.tabs__note { margin-bottom: 1.4rem; font-size: .8rem; color: var(--c-muted); }

/* Single spec row: name ……… value + description */
.spec-list { list-style: none; display: grid; gap: 0; }
.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2rem;
  max-width: 580px;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--c-line);
}
.spec:first-child { padding-top: 0; }
.spec:last-child  { border-bottom: 0; }
.spec__name {
  font-family: var(--f-head);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-heading);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.spec__value {
  font-family: var(--f-head);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-red);
  text-align: right;
  white-space: nowrap;
}
.spec__desc {
  grid-column: 1 / -1;
  margin-top: .45rem;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-text);
}
.spec__desc em { color: var(--c-heading); font-weight: 600; }

/* ---------------------------------------------------------------------
   14  Panels, icon lists & forms
   --------------------------------------------------------------------- */
.panel {
  position: relative;
  background: var(--c-panel);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 72px);
}

.contact-list { list-style: none; display: grid; gap: 1.6rem; }
.contact-list li { display: grid; grid-template-columns: 20px 1fr; gap: 1rem; }
.contact-list svg { width: 17px; height: 17px; margin-top: 4px; color: var(--c-red); }
.contact-list p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--c-text-strong); }
.contact-list .gold { color: var(--c-red); font-weight: 600; }
.contact-list a { color: var(--c-heading); }
.contact-list a:hover { color: var(--c-red); }

.form-title {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 2.6rem 0 1.4rem;
  font-family: var(--f-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-heading);
  text-transform: uppercase;
}
.form-title svg { width: 18px; height: 18px; color: var(--c-red); }

.form { display: grid; gap: 1.15rem; }
.field { position: relative; display: block; }
.field__input {
  width: 100%;
  padding: .7rem 0 .55rem;
  border: 0;
  border-bottom: 1px solid #8c8c8c;   /* ≥3:1 on the #f5f5f5 panel */
  border-radius: 0;
  background: transparent;
  color: var(--c-heading);
  font-family: var(--f-body);
  font-size: .92rem;
  outline: none;
  transition: border-color .3s;
}
.field__input::placeholder { color: var(--c-muted); opacity: 1; }
.field__input:focus { border-color: var(--c-red); }
.field__input:focus::placeholder { opacity: .5; }
textarea.field__input { min-height: 110px; resize: vertical; }
.field__input:user-invalid { border-color: #c0392b; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .6rem; }
.form__hint { font-size: .75rem; color: var(--c-muted); }
.form__status { font-size: .85rem; color: var(--c-red); min-height: 1.4em; }
.form__status.is-success { color: var(--c-heading); font-weight: 600; }
.form__status.is-error { color: var(--c-red-dark); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Honeypot – off-screen for humans, still present for bots */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Privacy consent checkbox */
.consent { display: grid; grid-template-columns: 18px 1fr; gap: .75rem; align-items: start; cursor: pointer; }
.consent__input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--c-red); cursor: pointer; }
.consent__label { font-size: .78rem; line-height: 1.55; color: var(--c-muted); }
.consent__label a { color: var(--c-heading); text-decoration: underline; text-underline-offset: 2px; }
.consent__label a:hover { color: var(--c-red); }

/* ---------------------------------------------------------------------
   15  Map
   --------------------------------------------------------------------- */
.map {
  position: relative;
  overflow: hidden;
  background: var(--c-panel);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .35);
}
.map iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  filter: grayscale(.25);
}

/* Contact block: grey panel with map overlapping on the right */
/* Contact block: grey panel left, square map right that overlaps the panel
   only by --map-overlap; the panel keeps that strip (+ gap) free. */
.contact-block {
  --map-overlap: 40px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.contact-block .panel {
  grid-column: 1;
  grid-row: 1;
  padding-right: calc(var(--map-overlap) + clamp(28px, 4vw, 56px));
}
.contact-block .panel .title--line::before { width: clamp(28px, 3vw, 44px); right: calc(100% + 14px); }   /* stays inside the panel padding */
/* Company name in two calm lines, no "Tech-nology" hyphenation */
.contact-block .panel > .title {
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  -webkit-hyphens: manual;
  hyphens: manual;
}
.contact-block .map {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  width: min(100% + var(--map-overlap), 600px);
  aspect-ratio: 1 / 1;
  margin-top: 90px;
  margin-left: calc(var(--map-overlap) * -1);
  z-index: 2;
}
.contact-block .map iframe { min-height: 0; }

/* ---------------------------------------------------------------------
   16  CTA card (red "Sales" band of cctc-pcb.com as a card)
   --------------------------------------------------------------------- */
/* Diagonal composition: portrait photo top-left, landscape photo bottom-right,
   both overlapped equally by the centred card; the grey block peeks out
   behind the top-right corner of the right photo. */
.cta {
  position: relative;
  min-height: 480px;
  display: grid;
  place-items: center;
}
.cta__media-a { position: absolute; left: 3%;  top: 0;   width: 27%; height: 76%; z-index: 1; }
.cta__media-b { position: absolute; right: 3%; bottom: 0; width: 27%; height: 70%; z-index: 1; }
.cta__block   { position: absolute; right: 0;  top: 14%; width: 15%; height: 34%; z-index: 0; }
.cta__card {
  position: relative;
  z-index: 3;
  width: min(100%, 660px, 56%);
  padding: clamp(40px, 5vw, 60px) clamp(24px, 6vw, 80px) clamp(36px, 4vw, 50px);
  background: var(--c-red);
  color: var(--c-white);
  text-align: center;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45);
}
.cta__card .title { margin-bottom: 1.2rem; color: var(--c-white); }
.cta__card .title--center::after { background: var(--c-white); }
.cta__card p { max-width: 460px; margin: 0 auto 1.8rem; font-size: .95rem; color: var(--c-white); }
.cta__card .btn { border-color: var(--c-white); color: var(--c-white); }
.cta__card .btn--solid { background: var(--c-white); color: var(--c-red); }
.cta__card .btn:hover,
.cta__card .btn--solid:hover { background: var(--c-heading); border-color: var(--c-heading); color: var(--c-white); }

/* ---------------------------------------------------------------------
   17  Page hero (sub pages)
   --------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 90px));
  padding-bottom: clamp(56px, 7vw, 110px);
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line);
}
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.page-hero__title { position: relative; padding-left: 0; color: var(--c-heading); }
.page-hero__lead {
  max-width: 480px;
  margin-top: 1.8rem;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--c-text-strong);
  text-wrap: pretty;               /* no lone „1999“ on the last line */
}
.page-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.6rem;
  font-family: var(--f-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.page-hero__crumbs a { color: var(--c-red); }
.page-hero__crumbs a:hover { color: var(--c-red-dark); }
.page-hero__crumbs .sep { width: 18px; height: 1px; background: var(--c-red); }
.page-hero .collage { aspect-ratio: 1 / .78; }
.page-hero .collage .block { left: 52%; top: 0;   width: 34%; height: 36%; }
.page-hero .collage .c-a   { left: 0;   top: 12%; width: 66%; height: 72%; z-index: 1; }
.page-hero .collage .c-b   { left: 48%; top: 38%; width: 52%; height: 62%; z-index: 2; }

/* the hero now ends in a light band + hairline – give a flush section breathing room */
.page-hero + .section--flush-top { padding-top: clamp(48px, 6vw, 90px); }

/* Text-only page hero (legal pages) */
.page-hero--text .page-hero__grid { grid-template-columns: 1fr; }
.page-hero--text .page-hero__lead { max-width: 640px; }
/* same column as the .legal content below (820px, centred) */
.page-hero--text .page-hero__title { width: 100%; max-width: 820px; margin-inline: auto; }

/* ---------------------------------------------------------------------
   18  Sub-page components
   --------------------------------------------------------------------- */

/* Stat strip – large red numerals between rules */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.stat {
  position: relative;
  padding: 2.4rem 1.5rem 2.2rem;
  text-align: center;
}
.stat + .stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: var(--c-line);
}
.stat__value {
  display: block;
  font-family: var(--f-head);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-red);
}
.stat__label {
  display: block;
  margin-top: .8rem;
  font-family: var(--f-head);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Cards – white tiles with a red top rule and numbered tag */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.card {
  position: relative;
  padding: 2.4rem 2rem 2.2rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-red);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .3);
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -24px rgba(0, 0, 0, .35); }
.card__num {
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--f-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-red);
}
.card__icon { width: 34px; height: 34px; margin-bottom: 1.3rem; color: var(--c-red); }
/* certificate cards: validity + PDF links; 5 cards → 3 + 2 on desktop */
.card__valid { margin: 1rem 0 .2rem; font-size: .8rem; font-weight: 600; color: var(--c-text-strong); }
.card__links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .7rem; }
.certs-holder { max-width: 46rem; margin-inline: auto; font-size: .85rem; color: var(--c-muted); }
@media (min-width: 1181px) { .cards--certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card__title {
  margin-bottom: .9rem;
  font-family: var(--f-head);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-heading);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.card p { font-size: .9rem; color: var(--c-text); }

/* Check list with red check marks */
.check-list { list-style: none; display: grid; gap: 1.1rem; }
.check-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .9rem;
  font-size: .95rem;
  color: var(--c-text-strong);
}
.check { width: 16px; height: 16px; margin-top: 5px; color: var(--c-red); }

/* Chips / application grid */
.chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));   /* 6 chips: 6 → 3 → 2 → 1 columns, so no empty (grey) cells */
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  min-height: 170px;
  padding: 1.5rem .75rem;
  background: var(--c-white);
  text-align: center;
  transition: background-color .35s;
}
.chip:hover { background: var(--c-bg-alt); }
.chip svg { width: 34px; height: 34px; color: var(--c-red); }
.chip span {
  font-family: var(--f-head);
  font-size: .76rem;               /* long single words (INDUSTRIEAUTOMATION) must fit a 6-up cell */
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--c-heading);
  text-transform: uppercase;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Contact people – styled like spec rows */
.people { list-style: none; display: grid; gap: 0; }
.person {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .4rem 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--c-line);
}
.person:first-child { border-top: 1px solid var(--c-line); }
.person__name {
  font-family: var(--f-head);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-heading);
}
.person__role { font-size: .88rem; color: var(--c-text); }
.person__contact { text-align: right; font-size: .85rem; line-height: 1.6; }
.person__contact a { color: var(--c-heading); }
.person__contact a:hover { color: var(--c-red); }
.person__ext {
  font-family: var(--f-head);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-red);
}

/* Generic data table */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.table th {
  padding: 0 1rem 1rem 0;
  text-align: left;
  font-family: var(--f-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-heading);
  border-bottom: 2px solid var(--c-red);
}
.table td {
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text-strong);
  vertical-align: top;
}
.table td:first-child { font-family: var(--f-head); font-weight: 600; color: var(--c-heading); }

/* Video frame */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
}
.video iframe, .video video, .video .artwork { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Timeline / roadmap */
.timeline { list-style: none; position: relative; display: grid; gap: 2.4rem; padding-left: 2.4rem; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--c-line); }
.timeline li { position: relative; }
.timeline li::before {
  content: '';
  position: absolute;
  left: calc(-2.4rem + 1px);
  top: .35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-red);
}
.timeline__year {
  font-family: var(--f-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-red);
}
/* Company history: several milestones per year, compact rhythm; long lists in two columns */
.timeline--compact { gap: 1.4rem; }
.timeline__year { display: block; line-height: 1.3; }
.timeline li p { margin: .3rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--c-text); }
.timeline-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 1.4rem clamp(2.5rem, 5vw, 4.5rem); }

/* Article (news detail) */
.article {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-block: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--c-line);
}
.article:first-child { border-top: 0; padding-top: 0; }
.article__media { position: relative; aspect-ratio: 4 / 3; }
.article__media .photo, .article__media .artwork { position: absolute; inset: 0; min-height: 0; }
.article__media .block { left: -22px; top: -22px; width: 45%; height: 45%; z-index: -1; }
.article__title {
  margin: .4rem 0 1.5rem;
  font-family: var(--f-head);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-heading);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.article__lang {
  display: inline-block;
  margin-left: .6rem;
  padding: .2rem .55rem;
  border: 1px solid var(--c-red);
  border-radius: 30px;
  font-family: var(--f-head);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.3;
  color: var(--c-red);
  vertical-align: middle;
}

/* Legal pages (Impressum / AGB) */
.legal { max-width: 820px; margin-inline: auto; }
.legal__section { padding-block: 2.6rem; border-top: 1px solid var(--c-line); }
.legal__section:first-child { border-top: 0; padding-top: 0; }
/* Widerspruch Besucherstatistik (js/stats.js) */
.stats-optout { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.stats-optout [data-stats-status] { font-weight: 600; }
.legal h2 {
  margin-bottom: 1.4rem;
  font-family: var(--f-head);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-heading);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.legal h3 {
  margin: 1.8rem 0 .8rem;
  font-family: var(--f-head);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-heading);
}
.legal p, .legal li { font-size: .94rem; color: var(--c-text); }
/* AGB: version line above the contents, numbered clauses, closing block */
.legal__intro { margin-bottom: 1.6rem; }
.legal__intro .legal__meta { margin-bottom: .4rem; font-size: .85rem; color: var(--c-muted); }
.legal__body p:last-child, .legal__closing p { margin-bottom: 0; }
.legal__body strong { color: var(--c-heading); }
.legal address { font-style: normal; color: var(--c-text-strong); line-height: 1.8; }
/* company-data blocks (address / representation / register) share one colour + rhythm */
.legal-grid p { color: var(--c-text-strong); line-height: 1.8; }
.legal-toc {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 3rem;
}
.legal-toc a {
  display: inline-block;
  padding: .55rem 1rem .5rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 30px;
  font-family: var(--f-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-heading);
  transition: border-color .25s, color .25s;
}
.legal-toc a:hover { border-color: var(--c-red); color: var(--c-red); }
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 2rem 3rem; }

/* ---------------------------------------------------------------------
   19  Footer – slate block with copyright bar
   --------------------------------------------------------------------- */
.site-footer {
  padding: clamp(60px, 7vw, 100px) 0 0;
  background: var(--c-slate);
  color: var(--c-slate-text);
  text-align: center;
}
.site-footer .logo {
  margin: 0 auto 2.4rem;
  color: var(--c-white);
  opacity: 1;
}
.site-footer .logo__name { color: var(--c-white); }
.site-footer .logo__sub  { color: var(--c-red-on-slate); }
.site-footer .logo__loc  { color: var(--c-slate-text); }
.site-footer .logo:hover .logo__name { color: var(--c-white); }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 2rem;
  list-style: none;
  margin-bottom: 1.8rem;
}
.footer-nav a {
  font-family: var(--f-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--c-white);
  text-transform: uppercase;
}
.footer-nav a:hover { color: var(--c-red-on-slate); }
.footer-address {
  margin-bottom: 0;
  font-size: .82rem;
  line-height: 1.8;
  color: var(--c-slate-text);
}
.footer-address a { color: var(--c-slate-text); }
.footer-address a:hover { color: var(--c-white); }
/* full-bleed copyright bar at the very bottom */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.2rem;
  margin-top: clamp(40px, 5vw, 64px);
  padding-block: 1.15rem;
  background: var(--c-slate-2);
  box-shadow: 0 0 0 100vmax var(--c-slate-2);
  clip-path: inset(0 -100vmax);
  font-size: .74rem;
  color: #cccccc;
}
.footer-meta a { color: #cccccc; }
.footer-meta a:hover { color: var(--c-red-on-slate); }

/* Back-to-top */
.to-top {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-white);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s, background-color .3s;
}
.to-top svg { width: 18px; height: 18px; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-red-dark); color: var(--c-white); }

/* ---------------------------------------------------------------------
   20  Reveal animations
   ---------------------------------------------------------------------
   Usage: data-animate="fade-up | fade-left | fade-right | wipe |
          wipe-left | grow | zoom"  (+ optional style="--d:.2s")
   Elements are only hidden when JS is running (html.js).
   --------------------------------------------------------------------- */
.js [data-animate] {
  transition:
    opacity 1s var(--ease-out) var(--d, 0s),
    transform 1.1s var(--ease-out) var(--d, 0s),
    clip-path 1.25s var(--ease-io) var(--d, 0s);
}
.js [data-animate="fade-up"]    { opacity: 0; transform: translateY(40px); }
.js [data-animate="fade-left"]  { opacity: 0; transform: translateX(-50px); }
.js [data-animate="fade-right"] { opacity: 0; transform: translateX(50px); }
.js [data-animate="fade"]       { opacity: 0; }
.js [data-animate="zoom"]       { opacity: 0; transform: scale(.92); }
.js [data-animate="grow"]       { transform: scale(0); transform-origin: left top; }
.js [data-animate="grow-r"]     { transform: scale(0); transform-origin: right top; }
.js [data-animate="wipe"]       { clip-path: inset(0 100% 0 0); }
.js [data-animate="wipe-left"]  { clip-path: inset(0 0 0 100%); }
.js [data-animate="wipe-up"]    { clip-path: inset(100% 0 0 0); }
.js [data-animate].is-visible {
  opacity: 1;
  transform: none;
}
/* wipes end slightly outside the box so drop shadows are not clipped */
.js [data-animate^="wipe"].is-visible { clip-path: inset(-90px -90px -90px -90px); }
/* photos inside a wipe get a gentle settle-zoom */
.js [data-animate^="wipe"] img { transform: scale(1.15); transition: transform 1.8s var(--ease-out) var(--d, 0s); }
.js [data-animate^="wipe"].is-visible img { transform: scale(1); }
.js [data-animate^="wipe"].is-visible:hover img { transform: scale(1.035); }

/* ---------------------------------------------------------------------
   21  Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1280px) {
  /* 6-up chips get too narrow for „INDUSTRIEAUTOMATION“ – 2 × 3 */
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Montserrat is wide – tighten the desktop header so it still fits */
  .site-header__inner { gap: 1.4rem; }
  .main-nav__list { gap: 1.15rem; }
  .main-nav__link { font-size: .74rem; letter-spacing: .1em; }
  .header-tools { gap: .85rem; }
  .btn-phone { padding: .62rem 1rem .58rem; font-size: .74rem; letter-spacing: .05em; }
}

@media (max-width: 1180px) {
  .header-tools .social-link { display: none; }
  .hero__info .info-list p { font-size: .82rem; }
}

/* tablet: 4 certificate cards as 2 × 2 (auto-fit would leave a 3 + 1 orphan);
   the two spec lists / contact panels stay side by side instead of one narrow column */
@media (min-width: 761px) and (max-width: 1180px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .split.split--even.split--top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --header-h: 74px; --header-h-sm: 64px; }

  .nav-toggle { display: block; }
  .header-tools { gap: .9rem; position: relative; z-index: 3; }

  .main-nav {
    position: fixed;
    inset: 3px 0 0 0;                /* keep the header's red top stripe visible */
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h) + 20px) var(--gutter) 40px;
    background: var(--c-white);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease-out), visibility .45s;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; }
  .main-nav__list { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .main-nav__link {
    font-size: clamp(1.7rem, 7vw, 2.5rem);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--c-heading);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), color .25s;
  }
  .main-nav.is-open .main-nav__link { opacity: 1; transform: none; }
  .main-nav.is-open li:nth-child(2) .main-nav__link { transition-delay: .05s; }
  .main-nav.is-open li:nth-child(3) .main-nav__link { transition-delay: .1s; }
  .main-nav.is-open li:nth-child(4) .main-nav__link { transition-delay: .15s; }
  .main-nav.is-open li:nth-child(5) .main-nav__link { transition-delay: .2s; }
  .main-nav__link:hover, .main-nav__link.is-active { color: var(--c-red); }
  .main-nav__link::after { left: auto; right: -30px; bottom: 50%; width: 16px; height: 3px; transform: translateY(50%) scaleX(0); }
  .main-nav__link.is-active::after { transform: translateY(50%) scaleX(1); }
  .main-nav__extras {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-line);
  }
  .main-nav__extras .social-link { display: grid; }
  .main-nav__extras .btn-phone { padding: .8rem 1.4rem .76rem; font-size: .8rem; }

  .site-header .brand { position: relative; z-index: 3; }

  /* hero: switch from absolute composition to flow */
  .hero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 48px; }
  .hero__frame { grid-template-rows: none; }
  .hero__media-a { grid-column: 1 / 10; grid-row: 1; height: auto; aspect-ratio: 4 / 3.4; }
  .hero__heading { grid-column: 2 / -1; grid-row: 2; margin-top: -22%; padding: 0 0 0 1rem; --hero-pad: 0px; }
  .hero__info    { grid-column: 3 / -1; grid-row: 3; padding: 2.4rem 0 0; }
  .hero__media-b { grid-column: 4 / -1; grid-row: 4; height: auto; aspect-ratio: 16 / 11; margin: 3rem 0 0; }
  .hero__tag     { grid-column: 1 / 9; grid-row: 5; margin-top: -2.4rem; align-self: start; }
  .hero__tag .ruled { background: var(--c-hero-a); }
  /* the headline now overlaps the photo's lower part – darken it so the text reads */
  .hero__media-a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--c-hero-a) 88%, transparent) 0%,
      color-mix(in srgb, var(--c-hero-a) 55%, transparent) 38%,
      transparent 68%);
    pointer-events: none;
  }

  .split, .who { grid-template-columns: 1fr; }
  .about-text, .who__text { max-width: 640px; }

  .tabs { grid-template-columns: 1fr; gap: 0; }
  .tabs__head { text-align: left; margin-bottom: 1.6rem; }
  .tabs__list {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .8rem;
    margin-bottom: 2rem;
    scrollbar-width: thin;
  }
  .tabs__tab {
    flex-shrink: 0;
    padding: .65rem 1.1rem .6rem;
    border: 1px solid var(--c-line-strong);
    border-radius: 30px;
    background: var(--c-white);
    text-align: center;
    white-space: nowrap;
  }
  .tabs__tab br { display: none; }
  .tabs__tab::before { display: none; }
  .tabs__tab[aria-selected="true"] { border-color: var(--c-red); background: var(--c-red); color: var(--c-white); }
  .tabs__panels { grid-column: 1; grid-row: auto; padding-top: 0; }

  .contact-block { grid-template-columns: 1fr; }
  .contact-block .panel { padding-right: clamp(28px, 5vw, 72px); }
  .contact-block .map { grid-column: 1; grid-row: 2; width: 100%; height: 380px; aspect-ratio: auto; margin-top: 0; margin-left: 0; }

  /* stacked text columns sit flush with the container: make room for the red rule */
  .parent__text { margin-left: 0; }
  .title--line,
  .section-head .title--line { margin-left: calc(clamp(48px, 7vw, 110px) + 18px); }   /* = rule width + gap */
  /* inside the grey panel: short rule that stays within the panel padding */
  .contact-block .panel .title--line { margin-left: 22px; }
  .contact-block .panel .title--line::before { width: 28px; right: calc(100% + 10px); }

  .page-hero__grid { grid-template-columns: 1fr; }

  .article { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .hero__media-a { aspect-ratio: 4 / 4.2; }
  .header-tools .btn-phone { display: none; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 1.4rem; }
  .brand__logo, .is-scrolled .brand__logo { height: 40px; }

  .collage--duo   { aspect-ratio: 1 / 1.05; }
  .collage--stack { aspect-ratio: 1 / 1.15; }
  .collage--wide  { aspect-ratio: 1 / .8; }
  .collage--wide .c-a  { left: 6%; top: 6%; width: 86%; height: 64%; }
  .collage--wide .c-b  { left: 44%; top: 56%; width: 56%; height: 44%; }
  .collage--wide .tile { left: 4%; top: 58%; width: 30%; }
  .collage--wide .block { height: 60%; width: 30%; }

  .cta { min-height: 0; padding-top: 0; }
  .cta__media-a, .cta__media-b, .cta__block { display: none; }
  .cta__card { margin-top: 0; width: 100%; }

  .person { grid-template-columns: 1fr; }
  .person__contact { text-align: left; }
  .title--line::before { width: 28px; right: calc(100% + 10px); }
  .title--line,
  .section-head .title--line { margin-left: 38px; }
  .contact-block .panel .title--line { margin-left: 22px; }
  .stat + .stat::before { display: none; }
  .stat { border-top: 1px solid var(--c-line); }
  .stats { border-top: 0; }
  .spec { column-gap: 1.25rem; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* data table: tighter labels so e-mail addresses stay on one line */
  .table { font-size: .85rem; }
  .table th { letter-spacing: .08em; }
  .table th, .table td { padding-right: .75rem; }
  .table th:last-child, .table td:last-child { padding-right: 0; }
  .table td a { white-space: nowrap; }
}

@media (max-width: 480px) {
  .hero__media-a { grid-column: 1 / 11; }
  .hero__heading { grid-column: 1 / -1; padding-left: 1rem; }
  .hero__info { grid-column: 1 / -1; padding-left: 1rem; }
  .hero__media-b { grid-column: 2 / -1; }
  .hero__tag { grid-column: 1 / 11; }
  .hero__tag .ruled { padding: 1rem 1.2rem; font-size: .88rem; letter-spacing: .1em; }
  .display, .display--md { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .title { font-size: 1.5rem; }
  .title--sm { font-size: 1.3rem; }
  .news-card__body { padding: 1.6rem 1.4rem 1.8rem; }
  .card { padding: 2rem 1.5rem 1.9rem; }
  .spec__name, .spec__value { font-size: .98rem; }
  /* 2-column stat grid: keep values like „1,3 Mio. m²“ on one line */
  .stat { padding-inline: .5rem; }
  .stat__value { font-size: clamp(1.3rem, 6.4vw, 2rem); white-space: nowrap; }
  .ruled { letter-spacing: .08em; }
  .chips { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   22  Reduced motion / print
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-animate] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

@media print {
  .site-header, .preloader, .to-top, .nav-toggle, .map, .cta__media-a, .cta__media-b { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .site-footer, .cta__card, .footer-meta { background: none !important; box-shadow: none !important; color: #000 !important; }
  .hero::before { display: none; }
  .title, .display, .spec__name, .spec__value, .hero .display, .info-list p, .cta__card p { color: #000 !important; text-shadow: none !important; }
  /* white-on-dark text whose background was removed above */
  .hero .ruled, .hero .info-list a, .hero .info-list .gold, .site-footer .logo__name, .footer-nav a,
  .cta__card .btn, .cta__card .btn--solid { color: #000 !important; border-color: #000 !important; background: none !important; }
  .hero__media-a::after { display: none; }
  /* light-on-slate text that carries its own colour */
  .footer-address, .footer-address a, .footer-meta a, .site-footer .logo__sub, .site-footer .logo__loc,
  .hero .accent { color: #000 !important; }
}

/* Visible content placeholder (missing information, to be supplied before go-live) */
mark.todo { background: var(--c-panel); color: var(--c-red); border: 1px dashed var(--c-red); border-radius: 4px; padding: 0 .3em; font-weight: 600; }

/* ---------------------------------------------------------------------
   Charts, data tables & timelines (Produktion / Unternehmen)
   Rebuilt from the legacy chart images. One series colour (--c-red),
   hairline grid, values formatted per language by i18n.js (data-num).
   --------------------------------------------------------------------- */
.chart { margin: 0; }
.chart__title {
  margin-bottom: 1rem;
  font-family: var(--f-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-heading);
}
.chart__note { margin: .9rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--c-muted); }

/* Horizontal bars: label above, bar + value at its tip below */
.bars { list-style: none; display: grid; gap: .85rem; margin-top: 1.4rem; }
.bar { display: grid; gap: .3rem; }
.bar__label { font-size: .84rem; line-height: 1.3; color: var(--c-text-strong); }
.bar__track { display: flex; align-items: center; gap: .55rem; }
.bar__fill {
  flex: none;
  width: calc(var(--v) / var(--max) * (100% - 4.5em));
  min-width: 2px;
  height: 12px;
  border-radius: 0 4px 4px 0;
  background: var(--c-red);
}
.bar__value { font-size: .84rem; font-weight: 600; color: var(--c-heading); white-space: nowrap; }

/* Line chart (inline SVG, scales with its column) */
.linechart { display: block; width: 100%; height: auto; overflow: visible; }
.linechart__grid line { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.linechart__axis text { font-family: var(--f-body); font-size: 13px; fill: var(--c-muted); }
.linechart__area { fill: var(--c-red); opacity: .08; }
.linechart__line {
  fill: none;
  stroke: var(--c-red);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.linechart__pts .pt__hit { fill: transparent; }
.linechart__pts .pt__dot { fill: var(--c-red); stroke: var(--c-bg); stroke-width: 2; }
.linechart__pts .pt__val {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  fill: var(--c-heading);
  paint-order: stroke;
  stroke: var(--c-bg);
  stroke-width: 4px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .15s;
}
.linechart__pts .pt--label .pt__val,
.linechart__pts .pt:hover .pt__val { opacity: 1; }
.linechart__pts .pt:hover .pt__dot { r: 5; }
@media (max-width: 600px) {
  .linechart .x-odd { display: none; }
  .linechart__axis text, .linechart__pts .pt__val { font-size: 16px; }
}

/* "Werte als Tabelle" under a chart */
.data-table { margin-top: 1rem; }
.data-table summary {
  cursor: pointer;
  font-family: var(--f-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-red);
}
.data-table table { width: 100%; max-width: 360px; margin-top: .75rem; border-collapse: collapse; font-size: .85rem; }
.data-table th, .data-table td { padding: .35rem .6rem; border-bottom: 1px solid var(--c-line); text-align: left; }
.data-table th { font-weight: 600; color: var(--c-heading); }
.data-table td { color: var(--c-text-strong); font-variant-numeric: tabular-nums; }

/* Wide data table (production roadmap): scrolls sideways inside its box on small screens */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-bg); }
.table-scroll:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.spec-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: .86rem; }
.spec-table th, .spec-table td { padding: .65rem .8rem; border-bottom: 1px solid var(--c-line); text-align: center; vertical-align: middle; }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table thead th {
  font-family: var(--f-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-heading);
  background: var(--c-panel);
}
.spec-table thead .spec-table__year { font-size: .82rem; letter-spacing: .04em; color: var(--c-red); border-left: 1px solid var(--c-line); }
.spec-table thead tr + tr th:nth-child(odd) { border-left: 1px solid var(--c-line); }
.spec-table .spec-table__item { text-align: left; }
.spec-table tbody th { text-align: left; font-weight: 600; color: var(--c-text-strong); min-width: 14rem; }
.spec-table td { color: var(--c-text); font-variant-numeric: tabular-nums; }
.spec-table tbody td:nth-of-type(odd) { border-left: 1px solid var(--c-line); }
.spec-table td.spec-table__wide { text-align: left; line-height: 1.55; }
.table-hint { display: none; }
.table-hint--top { margin: 0 0 .6rem; }
@media (max-width: 860px) {
  .table-hint { display: block; }
  /* keep the row labels visible while the values scroll sideways */
  .spec-table tbody th, .spec-table .spec-table__item { position: sticky; left: 0; z-index: 1; min-width: 9.5rem; background: var(--c-bg); box-shadow: 1px 0 0 var(--c-line); }
  .spec-table thead .spec-table__item { background: var(--c-panel); }
}