/* =========================================================================
   ZEL-WS GmbH - Startseite, Neuentwurf
   Eigenstaendiges Stylesheet. Teilt sich nichts mit style.css oder alt.css.

   Gestaltungsrichtung: technisches Datenblatt, gross gedruckt.
   Hergeleitet aus den Konventionen des Nutzfahrzeug- und Aufbaubaus:

     - Weisse Seite, Hellgrau als zweiter Grund. Keine dunklen Baender.
     - VERSAL gesetzte Ueberschriften mit leichter Sperrung.
     - Null Eckenradius. Scharfe Kanten, wie am Fahrzeug.
     - Fliesstext 17px, nicht 16px.
     - Grosse Fotografie traegt die Seite.
     - Orange nur als Marke: Registermarke, Zahlen, Aktionsflaechen.

   Der Schwerpunkt liegt auf der Erklaerung des Systems: Flaschenzug statt
   Hubvorrichtung, direkt nach dem Foto der Seitenansicht.
   ========================================================================= */

/* ---------- Schriften, lokal gehostet ---------- */

/* Archivo, variabel: Ueberschriften und Zahlen */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-stretch: 100%; font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-stretch: 100%; font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* Barlow: Fliesstext */
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body:    'Barlow', 'Segoe UI', system-ui, sans-serif;

  --orange:      #F15722;
  --orange-deep: #C4400E;   /* kleine Schrift auf Weiss, 5.1:1 */
  --orange-hover:#D8460F;

  --white:  #FFFFFF;
  --grey-1: #F2F3F5;   /* zweiter Seitengrund */
  --grey-2: #E3E5E9;   /* Linien, Fuellungen */
  --grey-3: #C9CDD4;
  --steel:  #6B6B6B;   /* Logo-Grau */
  --black:  #16181C;
  --black-2:#22262C;

  --ink:       #16181C;
  --ink-soft:  #575D66;   /* 6.6:1 auf Weiss */
  --on-black:  #FFFFFF;
  --on-black-soft: #A9AFB8;
  --on-orange: #16181C;   /* 5.0:1 auf Orange */

  --shell: 1240px;
  --gut: clamp(1.25rem, .6rem + 2vw, 3rem);
  --nav: 76px;

  --rule: 6px;         /* Staerke der orangen Registermarke */

  color-scheme: light;
}

/* ---------- Grundlagen ---------- */

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;      /* 17px, wie in der Branche ueblich */
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-deep); }

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

.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }

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

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--orange); color: var(--on-orange);
  padding: .8rem 1.4rem; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---------- Typografie ---------- */

/* Versal gesetzt, leicht gesperrt. Das ist die Stimme dieser Branche. */
.t-hero, .t-sec, .t-sub {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .022em;
  line-height: 1.02;
  text-wrap: balance;
}
.t-hero { font-size: clamp(1.95rem, 1.2rem + 2.6vw, 3rem); }
.t-sec  { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.75rem); }
.t-sub  { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); letter-spacing: .03em; }

.t-num {
  font-family: var(--display);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; }
.soft { color: var(--ink-soft); }

/* Registermarke: orange Balken ueber jedem Abschnittstitel.
   Ordnet die Seite, ersetzt die sonst ueblichen Kleinlabels. */
.mark { display: block; width: 56px; height: var(--rule); background: var(--orange); margin-bottom: 1.4rem; }
.mark--on-black { background: var(--orange); }

/* ---------- Aktionsflaechen ---------- */

.act {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 54px;
  padding: .85rem 1.7rem;
  border: 2px solid transparent;
  font-family: var(--display);
  font-size: .9375rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .16s linear, color .16s linear, border-color .16s linear;
}
.act svg { width: 1.1em; height: 1.1em; flex: none; }

/* Dunkle Schrift auf Orange: Weiss erreicht nur 3,4:1 und faellt durch AA. */
.act--fill { background: var(--orange); color: var(--on-orange); }
.act--fill:hover { background: var(--black); color: #fff; }

.act--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.act--line:hover { background: var(--ink); color: #fff; }

.act--onphoto { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.act--onphoto:hover { background: #fff; color: var(--ink); border-color: #fff; }

.act--onblack { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.act--onblack:hover { background: #fff; color: var(--ink); border-color: #fff; }

.inline-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 700;
  font-size: .9375rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--orange-deep); text-decoration: none;
  border-bottom: 2px solid var(--orange); padding-bottom: .2rem;
}
.inline-link:hover { color: var(--black); border-bottom-color: var(--black); }
.inline-link svg { width: 1em; height: 1em; }

/* ---------- Kopfzeile ---------- */

.head {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 2px solid var(--ink);
}
.head__in { display: flex; align-items: center; gap: 1.5rem; min-height: var(--nav); }

.logo { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.logo img { width: 44px; height: 44px; }
.logo span {
  font-family: var(--display); font-weight: 700;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--steel);
}

/* Menue und Sprachliste sind zwei getrennte Listen, muessen aber
   nebeneinander in einer Zeile stehen. */
.menu { margin-left: auto; display: flex; align-items: center; }
/* Nur die direkte Menueliste liegt waagerecht. Ohne ">" wuerde die
   Aufklappliste der Sprachauswahl mitgefasst und ebenfalls nebeneinander
   gesetzt. */
.menu > ul { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.menu > ul a {
  display: flex; align-items: center;
  height: var(--nav); padding: 0 1.1rem;
  font-family: var(--display); font-weight: 700;
  font-size: .875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); text-decoration: none;
  border-bottom: var(--rule) solid transparent;
  transition: color .16s linear, border-color .16s linear;
}
.menu > ul a:hover { color: var(--orange-deep); border-bottom-color: var(--grey-3); }
.menu > ul a[aria-current="page"] { border-bottom-color: var(--orange); }
.menu .is-cta { margin-left: .9rem; }
.menu .is-cta a {
  height: auto; min-height: 48px; padding: .6rem 1.4rem;
  background: var(--orange); color: var(--on-orange); border-bottom: 0;
}
.menu .is-cta a:hover { background: var(--black); color: #fff; }

/* ---------- Sprachauswahl als Aufklappmenue ----------
   Deutsch ist die Ausgangssprache. Die Flaggen sind als SVG gezeichnet,
   nicht als Emoji: Windows stellt Flaggen-Emoji gar nicht dar, dort
   erschienen nur die Buchstaben. */

.lang {
  position: relative;
  margin-left: 1.25rem; padding-left: 1.25rem;
  border-left: 1px solid var(--grey-3);
}

.lang__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .4rem .55rem;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--display); font-weight: 700;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink); cursor: pointer;
  transition: border-color .16s linear;
}
.lang__btn:hover { border-color: var(--grey-3); }
.lang__btn[aria-expanded="true"] { border-color: var(--ink); }

/* Duenner Rahmen, damit die weissen Flaggenhaelften auf Weiss sichtbar bleiben */
.flag {
  width: 22px; height: 14px; flex: none;
  box-shadow: 0 0 0 1px rgba(22, 24, 28, .28);
}

.lang__caret {
  width: 7px; height: 7px; flex: none;
  margin-left: .1rem; margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s linear;
}
.lang__btn[aria-expanded="true"] .lang__caret { transform: rotate(-135deg); margin-top: 2px; }

.lang__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 12.5rem;
  margin: 0; padding: 0; list-style: none;
  background: var(--white);
  border: 2px solid var(--ink);
}
.lang__menu[hidden] { display: none; }
.lang__menu a {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; min-height: 48px;
  font-family: var(--body); font-size: 1rem;
  color: var(--ink); text-decoration: none;
  transition: background-color .16s linear, color .16s linear;
}
.lang__menu li + li a { border-top: 1px solid var(--grey-2); }
.lang__menu a:hover { background: var(--grey-1); color: var(--orange-deep); }
.lang__menu a[aria-current="true"] { font-weight: 600; }
.lang__menu a[aria-current="true"]::after {
  content: ""; margin-left: auto;
  width: .5rem; height: .5rem; background: var(--orange);
}

/* Umschaltpunkt fuer das Klappmenue. 1119px statt der urspruenglichen 940px:
   die Kontaktseite hat sechs Menuepunkte, in der polnischen Fassung braucht
   die Zeile mit Logo und Sprachwahl rund 1068px. Zwischen 941 und 1082px
   ragte das Waagrechtmenue sonst aus der Seite. Beide Abfragen unten muessen
   denselben Wert tragen. */
@media (max-width: 1119px) {
  .lang {
    margin: 1.25rem 0 0; padding: 1rem 0 0;
    border-left: 0; border-top: 1px solid var(--grey-2);
  }
  .lang__btn { width: 100%; justify-content: flex-start; }
  .lang__caret { margin-left: auto; }
  .lang__menu { position: static; width: 100%; margin-top: .5rem; }
}

.burger {
  display: none; margin-left: auto;
  width: 52px; height: 52px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); cursor: pointer;
}
.burger svg { width: 26px; height: 26px; }
.burger .i-close { display: none; }
.burger[aria-expanded="true"] .i-open { display: none; }
.burger[aria-expanded="true"] .i-close { display: block; }

@media (max-width: 1119px) {
  .burger { display: inline-flex; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; margin: 0;
    background: var(--white); border-bottom: 2px solid var(--ink);
    padding: 0 var(--gut) 1.25rem;
  }
  .menu[data-open="true"] { display: block; }
  .menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > ul a {
    height: auto; padding: 1rem .25rem;
    border-bottom: 1px solid var(--grey-2);
    border-left: var(--rule) solid transparent;
  }
  .menu > ul a[aria-current="page"] { border-left-color: var(--orange); border-bottom-color: var(--grey-2); }
  .menu .is-cta { margin: 1rem 0 0; }
  .menu .is-cta a { justify-content: center; border-left: 0; }
}

/* ---------- 1. Hero: Vollbild-Foto ---------- */

.hero { position: relative; background: var(--black); }
.hero__photo { position: absolute; inset: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(15,17,20,.94) 0%, rgba(15,17,20,.86) 34%,
    rgba(15,17,20,.52) 62%, rgba(15,17,20,.28) 100%);
}
.hero__in {
  position: relative; z-index: 1;
  padding-block: clamp(3rem, 1.5rem + 7vw, 7rem);
  min-height: clamp(420px, 62vh, 640px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__copy { max-width: 46rem; }
.hero h1 { color: #fff; margin-bottom: 1.4rem; }
.hero__lede {
  font-size: 1.1875rem; line-height: 1.55;
  color: #E4E7EB; max-width: 44ch; margin-bottom: 2.2rem;
}
.hero__acts { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- Randloses Fotoband ---------- */

.wideshot {
  position: relative;
  margin: 0;
  height: clamp(240px, 34vw, 460px);
  background: var(--grey-1);
  overflow: hidden;
}
.wideshot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.wideshot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.5rem var(--gut) 1rem;
  background: linear-gradient(to top, rgba(10,12,15,.9), rgba(10,12,15,0));
  color: #E4E7EB;      /* 12,5:1 gegen den Verlaufsgrund */
  font-size: .9375rem;
}
.wideshot figcaption span {
  display: block;
  max-width: var(--shell);
  margin-inline: auto;
}

/* ---------- Aussagenblock: drei Zeilen, viel Luft ---------- */

.claim { background: var(--white); padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem); }
.claim__text {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.06;
  font-size: clamp(1.3rem, .3rem + 4.8vw, 4.5rem);
  color: var(--ink);
  max-width: 26ch;   /* muss die laengste Zeile ungebrochen tragen */
  /* "Kippvorrichtung" passt auf schmalen Geraeten sonst in keine Zeile */
  hyphens: auto;
  overflow-wrap: break-word;
}
.claim__text b { font-weight: inherit; color: var(--orange-deep); }
.claim__after {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 2px solid var(--ink);
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 1.125rem;
}

/* ---------- Bedienbares Schnittbild ---------- */

.pull { background: var(--grey-1); padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.pull__head { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3rem); }

/* Erklaerender Fliesstext, ab Desktop zweispaltig gesetzt */
.prose2 { max-width: 68rem; }
.prose2 p { color: var(--ink-soft); font-size: 1.0625rem; }
.prose2 p + p { margin-top: 1em; }
@media (min-width: 900px) {
  .prose2 { columns: 2; column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .prose2 p { break-inside: avoid; }
  .prose2 p:first-child { margin-top: 0; }
}

.pull__legend {
  display: grid; gap: 0; grid-template-columns: 1fr;
  margin-top: clamp(2rem, 1.2rem + 2.5vw, 3rem);
  border-top: 2px solid var(--ink);
}
@media (min-width: 760px) { .pull__legend { grid-template-columns: repeat(3, 1fr); } }
.pull__legend > div { padding: 1.4rem 1.5rem 1.4rem 0; }
@media (min-width: 760px) {
  .pull__legend > div + div { padding-left: 1.5rem; border-left: 1px solid var(--grey-3); }
}
.pull__legend dt {
  font-family: var(--display); font-weight: 700;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--orange-deep); margin-bottom: .45rem;
}
.pull__legend dd { margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* ---------- 4. Gegenueberstellung ---------- */

.cmp { background: var(--grey-1); padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.cmp__head { max-width: 44rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3rem); }

.cmp__grid { display: grid; gap: 2px; grid-template-columns: 1fr; background: var(--grey-3); border: 2px solid var(--ink); }
@media (min-width: 780px) { .cmp__grid { grid-template-columns: 1fr 1fr; } }

.cmp__col { background: var(--white); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.cmp__col--zel { background: var(--white); }
.cmp__title {
  font-family: var(--display); font-weight: 700;
  font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 1rem; margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--grey-2);
}
.cmp__col--old .cmp__title { color: var(--steel); }
.cmp__col--zel  .cmp__title { color: var(--ink); border-bottom-color: var(--orange); }

.cmp__list { margin: 0; padding: 0; list-style: none; }
.cmp__list li { padding: .9rem 0; border-bottom: 1px solid var(--grey-2); }
.cmp__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cmp__col--old .cmp__list li { color: var(--ink-soft); }
.cmp__col--zel .cmp__list li { font-weight: 500; padding-left: 1.6rem; position: relative; }
.cmp__col--zel .cmp__list li::before {
  content: ""; position: absolute; left: 0; top: 1.42rem;
  width: .55rem; height: .55rem; background: var(--orange);
}

/* ---------- 5. Merkmale ---------- */

.feat { background: var(--white); padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.feat__head { max-width: 44rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3rem); }

.feat__list {
  margin: 0; padding: 0; list-style: none;
  border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .feat__list { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
@media (min-width: 1020px) { .feat__list { grid-template-columns: repeat(3, 1fr); } }
.feat__list li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--grey-2);
  font-family: var(--display); font-weight: 600;
  font-size: .9375rem; text-transform: uppercase; letter-spacing: .045em;
  line-height: 1.35;
}
.feat__list li::before {
  content: ""; flex: none;
  width: .5rem; height: .5rem; background: var(--orange);
  transform: translateY(-.15em);
}

/* ---------- 6. Steuerung ---------- */

.ctrl { background: var(--grey-1); padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.ctrl__head { max-width: 44rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3rem); }
.ctrl__grid { display: grid; gap: 2px; grid-template-columns: 1fr; background: var(--grey-3); border: 2px solid var(--ink); }
@media (min-width: 820px) { .ctrl__grid { grid-template-columns: repeat(3, 1fr); } }
.ctrl__cell { background: var(--white); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.ctrl__cell svg { width: 34px; height: 34px; color: var(--orange-deep); margin-bottom: 1.1rem; }
.ctrl__cell h3 { margin-bottom: .6rem; }
.ctrl__cell p { color: var(--ink-soft); font-size: 1rem; }

/* ---------- 8. Baugroessen ---------- */

.sizes { background: var(--grey-1); padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.sizes__head { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3rem); }
.sizes__scroll { overflow-x: auto; border: 2px solid var(--ink); background: var(--white); }
.sizes table { width: 100%; border-collapse: collapse; min-width: 460px; }
.sizes caption { text-align: left; }
.sizes th, .sizes td { padding: 1.05rem clamp(1rem, .5rem + 1vw, 1.5rem); text-align: left; }
.sizes thead th {
  background: var(--ink); color: #fff;
  font-family: var(--display); font-weight: 700;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .12em;
}
.sizes tbody tr + tr th, .sizes tbody tr + tr td { border-top: 1px solid var(--grey-2); }
.sizes tbody th {
  font-family: var(--display); font-weight: 700;
  font-size: .9375rem; text-transform: uppercase; letter-spacing: .04em;
}
.sizes tbody td { color: var(--ink-soft); }
.sizes .state {
  display: inline-block; padding: .25rem .7rem;
  background: var(--grey-1); border: 1px solid var(--grey-3);
  font-family: var(--display); font-weight: 700;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft);
}
.sizes__note { margin-top: 1.25rem; font-size: 1rem; color: var(--ink-soft); max-width: 60ch; }

/* ---------- 9. Broschuere ---------- */

.doc { background: var(--black); color: #fff; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.doc__in { display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .doc__in { grid-template-columns: auto minmax(0,1fr) auto; gap: 2.5rem; } }
.doc svg.doc__ico { width: 52px; height: 52px; color: var(--orange); }
.doc h2 { color: #fff; margin-bottom: .6rem; }
.doc p { color: #D5D9DE; font-size: 1rem; max-width: 52ch; }

/* ---------- 10. Unternehmen ---------- */

.co { background: var(--white); padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.co__grid { display: grid; gap: var(--gut); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .co__grid { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(2rem,1rem+3vw,4rem); } }
.co__text p { color: var(--ink-soft); }
.co__text p + p { margin-top: 1em; }
.co figure { margin: 0; }
.co figcaption { margin-top: .8rem; font-size: .9375rem; color: var(--ink-soft); }

/* ---------- 11. Abschluss ---------- */

.end { background: var(--orange); color: var(--on-orange); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.end__in { display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .end__in { grid-template-columns: minmax(0,1fr) auto; gap: 3rem; } }
.end h2 { color: var(--on-orange); margin-bottom: .7rem; }
/* Auf Orange traegt nur die Groesse die Hierarchie, nicht die Helligkeit:
   ein aufgehellter Fliesstext faellt hier unter 4,5:1 durch. */
.end p { color: var(--on-orange); max-width: 48ch; }
.end .act--line { border-color: var(--on-orange); color: var(--on-orange); }
.end .act--line:hover { background: var(--on-orange); color: var(--orange); }

/* ---------- Kontaktseite ---------- */

.page-top { background: var(--black); color: #fff; padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.page-top h1 { color: #fff; margin-bottom: 1.2rem; }
.page-top .lede { color: #D5D9DE; }
.page-top .mark { background: var(--orange); }

.contact { background: var(--grey-1); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.contact__grid { display: grid; gap: var(--gut); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) {
  .contact__grid { grid-template-columns: minmax(0,.72fr) minmax(0,1fr); gap: clamp(2rem,1rem+3vw,4rem); }
}

.reach { border-top: 2px solid var(--ink); margin: 0; }
.reach > div { padding-block: 1.4rem; border-bottom: 1px solid var(--grey-3); }
.reach dt {
  font-family: var(--display); font-weight: 700;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--orange-deep); margin-bottom: .5rem;
}
.reach dd { margin: 0; font-size: 1.0625rem; }
.reach dd address { font-style: normal; line-height: 1.7; }
.reach dd a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--orange); }
.reach dd a:hover { color: var(--orange-deep); }

.form-box { background: var(--white); border: 2px solid var(--ink); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

.fs { border: 0; margin: 0 0 2.25rem; padding: 0; }
.fs:last-of-type { margin-bottom: 1.5rem; }
.fs > legend {
  padding: 0 0 .9rem; margin-bottom: 1.5rem; width: 100%;
  border-bottom: 2px solid var(--grey-2);
  font-family: var(--display); font-weight: 700;
  font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .05em;
}

.fgrid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .fgrid--2 { grid-template-columns: 1fr 1fr; } }

.fld { display: flex; flex-direction: column; gap: .45rem; }
.fld--full { grid-column: 1 / -1; }
.fld label, .fld .fld__lbl {
  font-family: var(--display); font-weight: 700;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink);
}
.req { color: var(--orange-deep); }
.hint { font-size: .9375rem; color: var(--ink-soft); font-family: var(--body); text-transform: none; letter-spacing: 0; font-weight: 400; }

.fld input[type="text"], .fld input[type="email"], .fld input[type="tel"],
.fld select, .fld textarea {
  width: 100%; min-height: 52px;
  padding: .7rem .9rem;
  font-family: var(--body); font-size: 1.0625rem; color: var(--ink);
  background: var(--white);
  border: 2px solid var(--grey-3);
  border-radius: 0;
  transition: border-color .16s linear;
}
.fld textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.fld input::placeholder, .fld textarea::placeholder { color: #7B818B; opacity: 1; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--steel); }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--orange); outline-offset: 1px; }

.sel { position: relative; display: block; }
.sel select { appearance: none; padding-right: 2.8rem; }
.sel::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%;
  width: .6rem; height: .6rem; margin-top: -.45rem;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: flex; align-items: center; min-height: 48px;
  padding: .6rem 1.3rem;
  border: 2px solid var(--grey-3);
  font-family: var(--display); font-weight: 700;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
  transition: border-color .16s linear, background-color .16s linear, color .16s linear;
}
.chip input:hover + span { border-color: var(--steel); }
.chip input:checked + span { border-color: var(--orange); background: var(--orange); color: var(--on-orange); }
.chip input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

.agree { display: flex; align-items: flex-start; gap: .9rem; }
.agree input[type="checkbox"] {
  flex: none; width: 24px; height: 24px; margin: 2px 0 0;
  accent-color: var(--orange); cursor: pointer;
}
.agree label {
  font-family: var(--body); font-weight: 400; font-size: 1rem;
  text-transform: none; letter-spacing: 0; line-height: 1.55;
}

.err { display: none; align-items: center; gap: .45rem; font-size: .9375rem; font-weight: 500; color: #A81F16; }
.fld[data-bad="true"] .err { display: flex; }
.fld[data-bad="true"] input, .fld[data-bad="true"] select, .fld[data-bad="true"] textarea { border-color: #A81F16; }
.fld[data-bad="true"] .chip span { border-color: #A81F16; }

.msg { display: none; gap: .9rem; padding: 1.15rem 1.25rem; margin-bottom: 2rem; border: 2px solid; font-size: 1rem; }
.msg[data-on="true"] { display: block; }
.msg h2 {
  font-family: var(--display); font-weight: 700;
  font-size: .9375rem; text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .45rem;
}
.msg--bad  { border-color: #A81F16; color: #A81F16; background: #FDF0EE; }
.msg--good { border-color: #14663A; color: #14663A; background: #EDF6F1; }
.msg--note { border-color: var(--orange-deep); color: var(--orange-deep); background: #FDF0EA; }
.msg ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.msg a { color: inherit; }

.form-foot { border-top: 2px solid var(--grey-2); padding-top: 1.5rem; }
.form-foot p { font-size: .9375rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.act--wide { width: 100%; justify-content: center; }

/* Auf sehr schmalen Geraeten laufen die Beschriftungen sonst
   ueber den Bildschirmrand hinaus. */
@media (max-width: 420px) {
  /* Auf sehr schmalen Geraeten darf die Beschriftung umbrechen. Eine
     zweizeilige Schaltflaeche ist besser als eine, die aus dem Bild laeuft. */
  .act {
    width: 100%; justify-content: center;
    padding-inline: 1rem;
    white-space: normal; text-align: center;
  }
  .hero__acts { display: grid; gap: .75rem; }
}

/* ---------- Instagram ----------
   Nur verlinkt, nichts eingebettet. Die Bildkacheln zeigen unsere
   eigenen Aufnahmen vom eigenen Server, kein Inhalt von Meta. */

/* Schwarzes Band mit Profilnamen */
.gram__head { background: var(--black); color: #fff; padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.gram__head-in {
  display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 780px) { .gram__head-in { grid-template-columns: auto minmax(0, 1fr) auto; } }

.gram__avatar {
  width: 96px; height: 96px; flex: none;
  background: var(--white);
  border: 3px solid var(--orange);
  padding: 12px;
}
.gram__avatar img { width: 100%; height: 100%; object-fit: contain; }

.gram__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.05; letter-spacing: -.01em;
  color: #fff; margin-bottom: .5rem;
  overflow-wrap: anywhere;
}
.gram__head p { color: #D5D9DE; font-size: 1rem; max-width: 42ch; margin: 0; }
.gram__head .act--fill:hover { background: #fff; color: var(--ink); }

.gram { background: var(--white); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.gram__note { max-width: 60ch; margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.gram__note h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); margin-bottom: .8rem;
  padding-top: 1.25rem; border-top: 2px solid var(--ink);
}
.gram__note p { color: var(--ink-soft); }
.gram__note p + p { margin-top: 1em; }

/* ---------- Rechtstexte: Impressum, Datenschutz ---------- */

.legal { background: var(--white); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.legal__body { max-width: 60ch; }
.legal__body > *:first-child { margin-top: 0; }

.legal__body h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink);
  margin-top: clamp(2.25rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
}
.legal__body h2 + p { margin-top: 1rem; }
.legal__body p { color: var(--ink-soft); }
.legal__body p + p { margin-top: 1em; }
.legal__body strong { color: var(--ink); font-weight: 600; }
.legal__body address { font-style: normal; }
/* Die Rechtstexte zeigen lange URLs als Linktext. Ohne Umbruchpunkt
   ragen sie auf schmalen Geraeten aus der Seite. */
.legal__body a { color: var(--orange-deep); overflow-wrap: anywhere; }

/* Zwischenueberschriften der Rechtstexte. h2 traegt die Nummer und den
   Trennstrich, h3 gliedert darunter, h4 benennt einzelne Anbieter. */
.legal__body h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.25rem; line-height: 1.25; color: var(--ink);
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
  hyphens: auto; overflow-wrap: break-word;
}
.legal__body h4 {
  font-family: var(--display); font-weight: 700;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
  /* --orange-deep erreicht auf diesem weissen Grund 5,14:1 */
  color: var(--orange-deep);
  margin-top: 1.75rem;
}
.legal__body h3 + p, .legal__body h4 + p { margin-top: .8rem; }
.legal__body ul {
  margin: 1em 0 0; padding-left: 1.35rem;
  color: var(--ink-soft); list-style: disc;
}
.legal__body li + li { margin-top: .55rem; }
.legal__body ul + p { margin-top: 1em; }
.legal__body address + p { margin-top: 1em; }

/* Der Widerspruchshinweis steht im Original in Versalien. Etwas kleiner
   gesetzt und leicht gesperrt, sonst wird der Block unlesbar. */
.legal__body p.legal__caps {
  font-size: .9375rem; letter-spacing: .01em; line-height: 1.65;
}

.legal__body p.legal__src {
  margin-top: clamp(2.25rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.25rem; border-top: 1px solid var(--grey-3);
  font-size: .875rem;
}

/* Offene Stellen sichtbar machen, damit sie vor dem Livegang auffallen */
.todo {
  display: inline-block;
  padding: .1rem .55rem;
  /* Eigener, dunklerer Ton: --orange-deep erreicht auf diesem hellen
     Grund nur 4,48:1 und faellt damit knapp durch WCAG AA. */
  background: #FDECE6; color: #A83609;
  border: 1px solid var(--orange);
  font-family: var(--display); font-weight: 700;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
}

.notice {
  border: 2px solid var(--orange);
  border-left-width: var(--rule);
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  background: var(--grey-1);
  max-width: 60ch;
}
.notice h2 {
  font-family: var(--display); font-weight: 700;
  font-size: .9375rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink); margin-bottom: .6rem;
  border: 0; padding: 0;
}
.notice p { color: var(--ink-soft); font-size: 1rem; }
.notice ul { margin: .7rem 0 0; padding-left: 1.2rem; color: var(--ink-soft); font-size: 1rem; }
.notice li + li { margin-top: .45rem; }

/* ---------- Fusszeile ---------- */

.foot { background: var(--black-2); color: #fff; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 1.5rem; }
.foot__note {
  border-left: var(--rule) solid var(--orange);
  padding: 1rem 1.25rem; margin-bottom: 2.5rem;
  background: rgba(255,255,255,.04);
}
.foot__note b {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
  /* Aufgehellte Marke: --orange erreicht auf dem Grund der Notiz nur 3,93:1
     und faellt bei 12px durch WCAG AA. Dieser Ton kommt auf 5,25:1. */
  color: #FF7A45; margin-bottom: .4rem;
}
.foot__note p { font-size: .9375rem; color: #C3C8CF; }

.foot__grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; padding-bottom: 2.25rem; }
@media (min-width: 700px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.foot h2 {
  font-family: var(--display); font-weight: 700;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--on-black-soft); margin-bottom: 1rem;
}
.foot__brand .logo span { color: var(--on-black-soft); }
.foot__brand p { margin-top: 1rem; font-size: 1rem; color: #C3C8CF; max-width: 28ch; }

.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.foot ul a { color: #fff; text-decoration: none; font-size: 1rem; }
.foot ul a:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

.foot address { font-style: normal; font-size: 1rem; color: #C3C8CF; line-height: 1.75; }
.foot address a { color: #C3C8CF; text-decoration: none; }
.foot address a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.foot__by a { color: inherit; text-decoration: none; }
.foot__by a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__base {
  display: flex; flex-wrap: wrap; gap: .7rem 2.5rem; justify-content: space-between;
  padding-top: 1.5rem; border-top: 1px solid #3A3F47;
  font-size: .9375rem; color: var(--on-black-soft);
}