/* ==========================================================================
   Coolmaxx GmbH – Homepage Designvorschlag
   main.css – Basis: Tokens, Reset, Typografie, Bausteine
   Aufbau folgt der Blanko-Vorlage (BlankPress): globales CSS unter assets/css/
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 FONT
   Inter wird extern über Google Fonts geladen.
   -------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");


/* --------------------------------------------------------------------------
   02 TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Schrift */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Graphit / Dunkelblau – dunkle Akzentflächen */
  --graphite-900: #14171a;
  --graphite-800: #1b1f23;
  --graphite-700: #242a2f;
  --graphite-600: #343c42;
  --navy-900: #0a1a29;
  --navy-800: #0f2a41;
  --navy-700: #143a5c;

  /* Kälte / Klima */
  --cool-050: #f2f8fd;
  --cool-100: #e4f0f9;
  --cool-200: #cbe2f3;
  --cool-300: #9cc9e9;
  --cool-400: #63a8dd;
  --cool-600: #2a7cbe;
  --cool-700: #1d6aa4;
  --cool-800: #14507f;

  /* Wärme / Heizung */
  --warm-050: #faf1ee;
  --warm-100: #f5e6e0;
  --warm-200: #edd2c7;
  --warm-300: #dc9f89;
  --warm-500: #b8563a;
  --warm-600: #a04428;
  --warm-700: #83301e;
  --warm-800: #6c2b1a;

  /* Neutrale */
  --paper: #ffffff;
  --off: #f6f7f8;
  --gray-100: #eef1f2;
  --gray-200: #dee3e5;
  --gray-300: #c8d0d3;
  --gray-400: #a9b2b7;
  --gray-600: #6a747a;
  --ink: #171b1e;
  --ink-soft: #4c555c;
  --ink-light: #7c868d;

  /* Linien & Form */
  --line: var(--gray-200);
  --line-strong: var(--gray-300);
  --r: 2px;
  --r-lg: 4px;

  /* Raster & Abstände */
  --shell: 1320px;
  --gutter: clamp(18px, 3.8vw, 64px);
  --section-y: clamp(60px, 7.5vw, 132px);
  --gap: clamp(14px, 1.6vw, 24px);

  /* Typo-Skala */
  --fs-display: clamp(2.7rem, 6.4vw, 5.6rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3.1rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-lead: clamp(1.02rem, 1.15vw, 1.2rem);
  --fs-base: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Bewegung */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .45s;
}


/* --------------------------------------------------------------------------
   03 RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.nav-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

address {
  font-style: normal;
}

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

::selection {
  background: var(--cool-200);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--graphite-900);
  color: #fff;
  padding: 10px 16px;
  font-size: var(--fs-small);
  transition: top .2s var(--ease);
}

.skip-link:focus {
  top: 12px;
}


/* --------------------------------------------------------------------------
   04 BAUSTEINE
   -------------------------------------------------------------------------- */

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

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--cool-800);
}

.kicker__line {
  width: 34px;
  height: 2px;
  background: currentColor;
  flex: 0 0 auto;
}

.kicker__place {
  color: var(--ink-light);
  letter-spacing: 0.16em;
  font-weight: 500;
}

.kicker__place::before {
  content: "/";
  margin-right: 8px;
  color: var(--line-strong);
}

.kicker--invert {
  color: var(--cool-200);
}

.kicker--invert .kicker__place {
  color: rgba(255, 255, 255, .6);
}

.section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding-bottom: clamp(28px, 3.4vw, 56px);
}

.section-head__num {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  letter-spacing: -0.03em;
}

.section-head__num--inline {
  margin-bottom: 14px;
}

.section-head__main {
  max-width: 62ch;
}

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: 16px;
  max-width: 26ch;
}

.section-lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 58ch;
}


/* Buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn__arrow {
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn:active {
  transform: translateY(1px);
}

.btn--solid {
  background: var(--graphite-900);
  color: #fff;
}

.btn--solid:hover {
  background: var(--navy-800);
}

.btn--warm {
  background: var(--warm-600);
  color: #fff;
}

.btn--warm:hover {
  background: var(--warm-800);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--gray-100);
}

.btn--onDark {
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}

.btn--onDark:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
}

.btn.is-placeholder {
  cursor: not-allowed;
  opacity: .72;
}

.btn.is-placeholder:hover {
  background: transparent;
  border-color: var(--line-strong);
}

.btn.is-placeholder:hover .btn__arrow {
  transform: none;
}


/* Feines technisches Raster */

.mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: .5;
}


/* Reveal-Animation */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}


/* --------------------------------------------------------------------------
   05 HEADER
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  transition:
    padding var(--dur) var(--ease),
    background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2.4vw, 40px);
  min-height: 86px;
  transition: min-height var(--dur) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px -22px rgba(10, 26, 41, .55);
}

.site-header.is-scrolled .header__inner {
  min-height: 66px;
}

.site-header.is-scrolled .header__scale {
  opacity: 0;
}


/* Logo / Branding */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.brand__mark {
  width: 26px;
  height: 26px;
}

.brand__markCool {
  fill: var(--cool-600);
}

.brand__markWarm {
  fill: var(--warm-600);
}

.brand__markSpine {
  stroke: var(--paper);
  stroke-width: 1.5;
  fill: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
}

.brand__name {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.brand__claim {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-light);
  font-weight: 600;
}


/* Navigation */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 8px 2px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--graphite-900);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__link.is-active {
  color: var(--ink);
}

.nav__phone {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 9px 16px;
  min-height: 46px;
}

.btn__label {
  line-height: 1.2;
}

.nav__phone .btn__label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .85;
}

.nav__phone .btn__meta {
  font-size: 0.95rem;
  font-weight: 700;
}

.nav__phone:hover {
  background: var(--warm-800);
}


/* Menü-Button mobil */

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-toggle__bars {
  display: block;
  width: 20px;
}

.nav-toggle__bars i {
  display: block;
  height: 2px;
  background: currentColor;
  margin: 4px 0;
  transition:
    transform .3s var(--ease),
    opacity .3s var(--ease);
}

.nav-toggle[aria-expanded="true"] i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] i:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


/* Temperaturskala im Header */

.header__scale {
  position: relative;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  max-width: var(--shell);
  margin: 0 auto;
  transition: opacity var(--dur) var(--ease);
}

.header__scaleBar {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  height: 1px;
  background:
    linear-gradient(
      to right,
      var(--cool-600),
      var(--gray-300) 48%,
      var(--warm-500)
    );
  opacity: .55;
}

.header__scaleLabel {
  position: relative;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--cool-800);
  background: rgba(255, 255, 255, .9);
  padding: 0 6px;
}

.header__scaleLabel--warm {
  color: var(--warm-800);
}


/* Anruf-Button mobil */

.mobile-call {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 48px;
  background: var(--warm-600);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mobile-call svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}


/* --------------------------------------------------------------------------
   06 HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(30px, 4vw, 64px);
  background:
    radial-gradient(
      60% 55% at 88% 12%,
      var(--cool-100) 0%,
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      46% 50% at 6% 96%,
      var(--warm-050) 0%,
      rgba(255, 255, 255, 0) 60%
    ),
    var(--paper);
  overflow: hidden;
}

.hero__grid {
  position: absolute;
  inset: 0;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
}

.hero__grid span {
  border-left: 1px solid var(--gray-100);
}

.hero__grid span:first-child {
  border-left: 0;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(0, .98fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding-bottom: clamp(34px, 4vw, 64px);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}

.hero__titleLine {
  display: block;
}

.hero__titleLine--warm {
  color: var(--warm-600);
  position: relative;
}

.hero__titleLine--warm::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: clamp(80px, 12vw, 180px);
  height: 3px;
  background:
    linear-gradient(
      to right,
      var(--warm-600),
      rgba(160, 68, 40, 0)
    );
}

.hero__text {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.hero__phone {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  border-left: 2px solid var(--warm-500);
}

.hero__phoneLabel {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-light);
  font-weight: 600;
}

.hero__phoneNumber {
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
}

.hero__phone:hover .hero__phoneNumber {
  color: var(--warm-600);
}


/* Hero-Bild */

.hero__media {
  position: relative;
}

.hero__frame {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--line-strong);
  pointer-events: none;
}

.hero__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  object-position: 52% 0%;
  filter: saturate(1.03) contrast(1.02);
}

.hero__readout {
  position: absolute;
  right: -12px;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 4px 8px;
}

.hero__readout--cool {
  top: 34%;
  color: var(--cool-800);
  border-color: var(--cool-200);
}

.hero__readout--warm {
  top: 58%;
  color: var(--warm-800);
  border-color: var(--warm-300);
}

.hero__vertical {
  position: absolute;
  right: -46px;
  top: 0;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-light);
  writing-mode: vertical-rl;
  height: 100%;
}


/* Leistungs-Leiste unter dem Hero */

.hero__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero__railItem {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px clamp(8px, 1.4vw, 18px);
  font-size: 0.92rem;
  font-weight: 600;
  border-left: 1px solid var(--line);
}

.hero__railItem:first-child {
  border-left: 0;
  padding-left: 0;
}

.hero__railNum {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--cool-800);
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   07 LEISTUNGEN
   -------------------------------------------------------------------------- */

.services {
  padding: var(--section-y) 0;
  background: var(--off);
  border-top: 1px solid var(--line);
}

.services__grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
}

.service {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top:
    3px solid
    var(--service-accent, var(--line-strong));
  transition:
    transform .5s var(--ease),
    box-shadow .5s var(--ease);
}

.service:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 46px -32px
    rgba(16, 24, 32, .55);
}

.service__media {
  position: relative;
  overflow: hidden;
}

.service__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  transition:
    transform .9s var(--ease),
    filter .6s var(--ease);
}

.service__body {
  flex: 1;
  padding: clamp(20px, 2.2vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.service__num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cool-800);
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
}

.service__title {
  font-size: var(--fs-h3);
}

.service__text {
  color: var(--ink-soft);
  font-size: 0.97rem;
  max-width: 42ch;
}

.service__list {
  width: 100%;
}

.service__list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.service__list li::before {
  content: "+";
  color: var(--warm-600);
  font-weight: 700;
  font-size: 0.9rem;
}

.service--accentCool {
  --service-accent: var(--cool-600);
}

.service--accentWarm {
  --service-accent: var(--warm-600);
}

.service--accentSteel {
  --service-accent: var(--graphite-600);
}


/* Mehr erfahren */

.service__more {
  width: 100%;
  margin-top: auto;
}

.service__moreBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--cool-800);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.service__moreBtn::-webkit-details-marker {
  display: none;
}

.service__moreBtn::marker {
  content: "";
}

.service__moreBtn::after {
  content: "+";
  color: var(--service-accent, var(--warm-600));
  font-weight: 700;
}

.service__more[open] .service__moreBtn::after {
  content: "\2013";
}

.service__more[open] .service__list {
  animation: serviceMore .32s var(--ease);
}

.service__more .service__list {
  margin-top: 10px;
}

.service__moreBtn:focus-visible {
  outline: 2px solid var(--cool-600);
  outline-offset: 3px;
}

@keyframes serviceMore {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* Prozess */

.process {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(28px, 3.4vw, 56px);
  border-top: 1px solid var(--line-strong);
}

.process__step {
  padding: clamp(18px, 2vw, 28px) 0 0;
  position: relative;
}

.process__step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--graphite-900);
}

.process__num {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--cool-800);
  margin-bottom: 8px;
}

.process__title {
  font-size: 1.12rem;
  margin-bottom: 6px;
}

.process__text {
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 34ch;
}


/* --------------------------------------------------------------------------
   08 KALT / WARM
   -------------------------------------------------------------------------- */

.temperature {
  position: relative;
  padding: clamp(60px, 7.6vw, 126px) 0;
  overflow: hidden;
  background: var(--paper);
  border-top: 1px solid var(--line);
  isolation: isolate;
}

.temperature__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.temperature__bg::before,
.temperature__bg::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 66%;
}

.temperature__bg::before {
  left: 0;
  background:
    linear-gradient(
      100deg,
      var(--cool-200) 0%,
      var(--cool-100) 34%,
      rgba(255, 255, 255, 0) 88%
    );
}

.temperature__bg::after {
  right: 0;
  background:
    linear-gradient(
      260deg,
      var(--warm-200) 0%,
      var(--warm-100) 34%,
      rgba(255, 255, 255, 0) 88%
    );
}

.temperature__inner {
  position: relative;
  z-index: 1;
  background-image:
    linear-gradient(
      90deg,
      rgba(24, 28, 31, .05) 0 1px,
      transparent 1px
    );
  background-size: calc(100% / 6) 100%;
}

.temperature__title {
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  max-width: 26ch;
  margin-bottom: clamp(30px, 3.8vw, 54px);
}

.temperature__stage {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 46px);
  align-items: start;
}

.temperature__stage > * {
  min-width: 0;
}

.world {
  max-width: 34ch;
}

.world--warm {
  text-align: right;
  margin-left: auto;
}

.world__label {
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-light);
  margin-bottom: 2px;
}

.world--cool .world__label {
  color: var(--cool-700);
}

.world--warm .world__label {
  color: var(--warm-700);
}

.world__word {
  font-size: clamp(3rem, 8.6vw, 7.6rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: .9;
  margin-bottom: 14px;
}

.world--cool .world__word {
  color: var(--cool-800);
}

.world--warm .world__word {
  color: var(--warm-600);
}

.world__dot {
  color: var(--ink);
}

.world__text {
  color: var(--ink-soft);
  font-size: 0.97rem;
  max-width: 32ch;
  margin-bottom: 16px;
}

.world--warm .world__text {
  margin-left: auto;
}

.world__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}

.world__list li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink);
}

.world__list li::before {
  content: "−";
  position: absolute;
  left: 0;
  color: var(--cool-700);
  font-weight: 800;
}

.world--warm .world__list li {
  padding-left: 0;
  padding-right: 20px;
}

.world--warm .world__list li::before {
  left: auto;
  right: 0;
  content: "+";
  color: var(--warm-600);
}

.temperature__axis {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: clamp(86px, 8vw, 128px);
  min-height: 260px;
}

.temperature__axisLine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background:
    linear-gradient(
      to bottom,
      var(--cool-600),
      var(--gray-300) 50%,
      var(--warm-500)
    );
}

.temperature__axisMark {
  position: relative;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cool-800);
  background: var(--paper);
  padding: 3px 8px;
  border: 1px solid var(--cool-200);
}

.temperature__axisMark--warm {
  color: var(--warm-800);
  border-color: var(--warm-300);
}

.scale {
  margin-top: clamp(34px, 4vw, 58px);
}

.scale__bar {
  display: block;
  height: 6px;
  background:
    linear-gradient(
      90deg,
      var(--cool-700) 0%,
      var(--cool-300) 30%,
      var(--gray-200) 50%,
      var(--warm-300) 70%,
      var(--warm-600) 100%
    );
}

.scale__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.scale__ticks li {
  position: relative;
  padding-top: 12px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-light);
}

.scale__ticks li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
  background: var(--line-strong);
}

.scale__ticks li:first-child {
  color: var(--cool-800);
}

.scale__ticks li:last-child {
  color: var(--warm-700);
  text-align: right;
}

.scale__ticks li:last-child::before {
  left: auto;
  right: 0;
}

.temperature__note {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 66ch;
  padding-left: 18px;
  border-left: 2px solid var(--warm-500);
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.temperature__note strong {
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   09 UEBER COOLMAXX
   -------------------------------------------------------------------------- */

.about {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--line);
}

.about__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}

.about__media {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
  align-items: stretch;
}

.about__mediaMain {
  position: relative;
  overflow: hidden;
}

.about__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__mediaMain img {
  aspect-ratio: 3 / 2;
}

.about__media::after {
  content: "";
  position: absolute;
  inset: auto -16px -16px auto;
  width: 46%;
  height: 46%;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  pointer-events: none;
}

.about__mediaTag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  padding: 4px 8px;
}

.about__text {
  color: var(--ink-soft);
  margin-bottom: 16px;
  max-width: 52ch;
}

.about__facts {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 28px;
  border-top: 1px solid var(--line-strong);
}

.about__facts > div {
  padding-top: 14px;
}

.about__facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-light);
  font-weight: 700;
  margin-bottom: 4px;
}

.about__facts dd {
  font-weight: 700;
  font-size: 0.98rem;
}


/* --------------------------------------------------------------------------
   10 BEWERTUNGEN
   -------------------------------------------------------------------------- */

.reviews {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--line);
}

.reviews__head {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: clamp(22px, 3.4vw, 60px);
  align-items: end;
  margin-bottom: clamp(26px, 3vw, 48px);
}

.reviews__headMain {
  max-width: 60ch;
}

.reviews__text {
  color: var(--ink-soft);
}

.reviews__score {
  display: flex;
  min-width: 214px;
  flex-direction: column;
  gap: 4px;
  padding:
    clamp(18px, 2vw, 28px)
    clamp(20px, 2.4vw, 34px);
  background: var(--graphite-900);
  color: #fff;
  border-radius: var(--r);
}

.reviews__number {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -0.05em;
}

.reviews__number::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 12px;
  background: var(--warm-500);
}

.reviews__label {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.6;
  color: var(--cool-200);
}

.reviews__carousel {
  position: relative;
}

.reviews__track {
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reviews__track::-webkit-scrollbar {
  display: none;
}

.reviews__track:focus-visible {
  outline: 2px solid var(--cool-800);
  outline-offset: 4px;
}

.review {
  flex: 0 0 min(330px, 80vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--cool-600);
  overflow: hidden;
  scroll-snap-align: start;
}

.review:nth-child(2n) {
  border-top-color: var(--warm-500);
}

.review__stars {
  color: var(--warm-500);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
}

.review__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-small);
  color: var(--ink-light);
}

.review__date {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.review__quote {
  margin: 0;
}

.review__quote p {
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.review__quote p::before {
  content: "\201E";
}

.review__quote p::after {
  content: "\201C";
}

.review__name {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.reviews__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(16px, 2vw, 26px);
}

.reviews__navGroup {
  display: flex;
  gap: 8px;
}

.reviews__nav {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: 1.05rem;
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.reviews__nav:hover {
  border-color: var(--warm-500);
  color: var(--warm-500);
}

.reviews__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reviews__dot {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.reviews__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.reviews__dot:hover::before {
  border-color: var(--ink);
}

.reviews__dot.is-active::before {
  background: var(--ink);
  border-color: var(--ink);
}

.reviews__source {
  margin-left: auto;
  font-size: var(--fs-small);
  color: var(--ink-light);
}


/* --------------------------------------------------------------------------
   11 JOBS / AUSBILDUNG
   -------------------------------------------------------------------------- */

.jobs {
  position: relative;
  padding: clamp(52px, 6.2vw, 104px) 0;
  background: var(--graphite-900);
  color: #fff;
  overflow: hidden;
}

.jobs__grid {
  position: absolute;
  inset: 0;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
}

.jobs__grid span {
  border-left:
    1px solid
    rgba(255, 255, 255, .07);
}

.jobs__grid span:first-child {
  border-left: 0;
}

.jobs__head {
  max-width: 66ch;
  margin-bottom: clamp(28px, 3.4vw, 54px);
}

.jobs__title {
  font-size: clamp(2.6rem, 7.6vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: .94;
  margin-bottom: 20px;
}

.jobs__titleWarm {
  color: var(--warm-500);
}

.jobs__lead {
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-lead);
  max-width: 56ch;
}

.jobs__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.jobs__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 7px 12px;
}

.jobs__benefits li::before {
  content: "\2713";
  color: var(--warm-300);
  font-weight: 700;
}

.jobs__cards {
  display: grid;
  grid-template-columns:
    repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

.jobcard {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 36px);
  background: rgba(255, 255, 255, .045);
  border:
    1px solid
    rgba(255, 255, 255, .13);
}

.jobcard--steel {
  grid-column: span 6;
  background: var(--graphite-700);
  border-color: var(--graphite-600);
}

.jobcard__tag {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--warm-300);
  border:
    1px solid
    rgba(220, 159, 137, .5);
  padding: 3px 8px;
}

.jobcard__title {
  font-size: clamp(1.4rem, 2vw, 1.9rem);
}

.jobcard__text {
  color: rgba(255, 255, 255, .76);
  font-size: 0.97rem;
  max-width: 44ch;
  margin-bottom: 6px;
}


/* --------------------------------------------------------------------------
   12 KONTAKT
   -------------------------------------------------------------------------- */

.contact {
  padding: var(--section-y) 0;
  background: var(--off);
  border-top: 1px solid var(--line);
}

.contact__grid {
  display: grid;
  grid-template-columns:
    minmax(0, .82fr)
    minmax(0, 1.18fr);
  gap: var(--gap);
  align-items: stretch;
}

.contact__card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(24px, 2.6vw, 42px);
  background: var(--graphite-900);
  color: #fff;
}

.contact__phone {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
}

.contact__phoneLabel {
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--warm-300);
}

.contact__phoneNumber {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: color var(--dur) var(--ease);
}

.contact__phone:hover .contact__phoneNumber {
  color: var(--warm-300);
}

.contact__address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.6;
}

.contact__addressName {
  font-weight: 700;
  color: #fff;
}

.contact__map {
  align-self: flex-start;
  display: inline-flex;
  gap: 8px;
  padding: 4px 0;
  margin: -4px 0;
  border-bottom:
    1px solid
    rgba(255, 255, 255, .35);
  font-size: 0.92rem;
  font-weight: 600;
  transition:
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.contact__map:hover {
  border-color: var(--warm-300);
  color: var(--warm-300);
}

.contact__form-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(22px, 2.6vw, 42px);
}

.contact__formTitle {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  margin-bottom: 10px;
}

.contact__formIntro {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 24px;
  max-width: 60ch;
}


/* Formular */

.form {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px clamp(14px, 1.8vw, 26px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.5;
  padding: 4px 0;
  color: var(--ink-soft);
}

.field__req {
  color: var(--warm-600);
  margin-left: 3px;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.field textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.6;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-light);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cool-600);
  box-shadow: 0 0 0 3px var(--cool-100);
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--warm-500);
}

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.field--check input {
  width: 24px;
  height: 24px;
  min-height: 24px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--cool-800);
}

.field--check label {
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--ink-soft);
}

.form__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.form__status {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--warm-800);
  max-width: 46ch;
  min-height: 1.2em;
}

.form__status.is-ok {
  color: var(--cool-800);
}


/* --------------------------------------------------------------------------
   13 FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--graphite-900);
  color: #fff;
  padding: clamp(40px, 4.6vw, 70px) 0 26px;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background:
    linear-gradient(
      to right,
      var(--cool-600),
      var(--gray-600) 50%,
      var(--warm-600)
    );
}

.footer__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(0, 1fr)
    minmax(0, .8fr)
    minmax(0, 1fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: start;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand__mark--footer {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
}

.brand__mark--footer .brand__markSpine {
  stroke: var(--graphite-900);
}

.footer__name {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.footer__claim {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
}

.footer__address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: rgba(255, 255, 255, .74);
  line-height: 1.7;
}

.footer__address a {
  display: inline-block;
  padding: 4px 0;
  margin: -4px 0;
  color: #fff;
  font-weight: 700;
  transition: color var(--dur) var(--ease);
}

.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer__navTitle {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 10px;
}

.footer__nav a {
  display: inline-block;
  padding: 5px 0;
  margin: -5px 0;
  color: rgba(255, 255, 255, .82);
  transition: color var(--dur) var(--ease);
}

.footer__address a:hover,
.footer__nav a:hover,
.footer__nav a:focus-visible {
  color: var(--warm-300);
}

.footer__meta {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .6);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__note {
  color: rgba(255, 255, 255, .42);
  font-size: 0.8rem;
  max-width: 40ch;
}


/* --------------------------------------------------------------------------
   14 MOTION
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .temperature__bg {
    animation: none;
  }

}


/* --------------------------------------------------------------------------
   15 TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 44px);
  }

  .hero__media {
    max-width: 660px;
  }

  .hero__readout {
    right: 10px;
  }

  .hero__vertical {
    display: none;
  }

  .hero__frame {
    inset: 12px -12px -12px 12px;
  }

  .about__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviews__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .reviews__score {
    min-width: 0;
    align-self: start;
  }

  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__inner {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 34px;
  }

  .services__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .temperature__stage {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr);
  }

}


@media (max-width: 900px) {

  .service__media img {
    aspect-ratio: 16 / 11;
  }

  .process {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .process__step {
    border-top: 1px solid var(--line);
    padding-block: 20px;
  }

  .process__step:first-child {
    border-top: 0;
  }

  .process__step::before {
    position: static;
    display: block;
    margin-bottom: 12px;
  }

  .temperature__facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .about__facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* --------------------------------------------------------------------------
   16 MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {

  :root {
    --section-y:
      clamp(
        48px,
        11vw,
        76px
      );
  }

  .site-header {
    position: sticky;
  }

  .header__inner {
    min-height: 66px;
  }

  .header__scale {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    z-index: 220;
  }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 210;

    width: min(88vw, 420px);
    height: 100dvh;

    margin: 0;

    padding:
      calc(84px + env(safe-area-inset-top))
      clamp(20px, 6vw, 34px)
      34px;

    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    gap: 24px;

    background: var(--graphite-900);
    color: #fff;

    transform: translateX(101%);
    visibility: hidden;

    transition:
      transform .42s var(--ease),
      visibility .42s var(--ease);

    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li {
    border-bottom:
      1px solid
      rgba(255, 255, 255, .12);
  }

  .nav__link {
    display: block;

    padding: 18px 0;

    font-size: 1.05rem;
    letter-spacing: 0.06em;

    color: rgba(255, 255, 255, .88);
  }

  .nav__link::after {
    bottom: 8px;
    background: var(--warm-500);
  }

  .nav__link:hover,
  .nav__link.is-active {
    color: #fff;
  }

  .nav__cta {
    margin-top: auto;
  }

  .nav__phone {
    width: 100%;
    align-items: flex-start;
    padding: 14px 18px;
    min-height: 56px;
  }

  .nav__phone .btn__label {
    font-size: 0.72rem;
  }

  .nav__phone .btn__meta {
    font-size: 1.05rem;
  }


  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(10, 26, 41, .55);
  }


  .mobile-call {
    display: flex;

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 190;

    justify-content: center;

    box-shadow:
      0 -8px 24px -18px
      rgba(10, 26, 41, .8);

    padding-bottom:
      calc(
        12px +
        env(safe-area-inset-bottom)
      );
  }

  body {
    padding-bottom: 60px;
  }


  .hero__title {
    font-size: clamp(2.3rem, 9.4vw, 3.6rem);
  }

  .hero__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__railItem {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 13px 0;
  }

  .hero__railItem:first-child {
    border-top: 0;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
    justify-content: space-between;
  }


  .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .section-head__num {
    font-size: 1.7rem;
  }


  .temperature__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 4vw, 22px);
  }

  .world,
  .world--warm {
    text-align: left;
    margin-left: 0;
  }

  .world__word {
    font-size: clamp(3rem, 15vw, 4.6rem);
  }

  .temperature__axis {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    min-height: 0;

    padding: 4px 0;
  }

  .temperature__axisLine {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;

    width: auto;
    height: 1px;

    transform: none;

    background:
      linear-gradient(
        to right,
        var(--cool-600),
        var(--gray-300) 52%,
        var(--warm-500)
      );
  }

  .temperature__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .temperature__facts li {
    padding-top: 12px;
  }

  .temperature__facts li + li {
    border-top: 1px solid var(--line);
  }


  .about__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__facts > div + div {
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }


  .reviews__score {
    padding: 20px 22px;
  }

  .reviews__nav {
    width: 44px;
    height: 44px;
  }


  .jobs__title {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .jobs__grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .jobcard,
  .jobcard--steel {
    grid-column: span 12;
  }


  .form {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact__card,
  .contact__form-wrap {
    padding: 22px;
  }

  .form__actions .btn {
    width: 100%;
    justify-content: space-between;
  }

  .form__actions {
    gap: 12px;
  }


  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .site-footer {
    padding-bottom: 34px;
  }

}


@media (max-width: 430px) {

  .brand__claim {
    font-size: 0.55rem;
    letter-spacing: 0.16em;
  }

  .hero__readout {
    font-size: 0.78rem;
    padding: 3px 6px;
  }

  .section-title {
    font-size: clamp(1.7rem, 8.4vw, 2.2rem);
  }

  .reviews__number {
    font-size: 2.6rem;
  }

}


/* --------------------------------------------------------------------------
   17 MOBIL-FEINSCHLIFF
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .temperature__axis {
    min-height: 0;
  }

  .scale__ticks li {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

}


@media (max-width: 620px) {

  .services__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service__media img {
    aspect-ratio: 16 / 11;
  }

}


/* --------------------------------------------------------------------------
   18 WORDPRESS / BLANKPRESS OVERRIDES
   Damit Gutenberg das Lab-Layout nicht einengt
   -------------------------------------------------------------------------- */

main,
.site-main,
.entry-content,
.wp-block-post-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.wp-block-html,
.entry-content > .wp-block-html,
.wp-block-post-content > .wp-block-html {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Automatischen WordPress-Seitentitel ausblenden */

.entry-header,
.page-header {
  display: none;
}


/* Keine zusätzlichen BlankPress-Abstände */

.site-main {
  margin-top: 0;
  margin-bottom: 0;
}


/* WordPress Adminbar + Sticky Header */

body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {

  body.admin-bar .site-header {
    top: 46px;
  }

}