@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/montserrat-300.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/montserrat-600.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/montserrat-700.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/montserrat-800.woff2") format("woff2")}
:root{--hex:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20326.6619875%20350%22%3E%3Cpath%20d%3D%22M291.1165352%2C60.2428649L204.6492473%2C11.4748146c-45.1578795-25.8183329-82.6276147%2C0-82.6276147%2C0L34.5833581%2C62.1583025C2.8775791%2C82.2392387%2C0%2C116.6637082%2C0%2C116.6637082v100.413585c0%2C52.590033%2C35.5454996%2C72.6798262%2C35.5454996%2C72.6798262l86.4761331%2C48.7680502c45.1578795%2C25.8183684%2C82.6276147%2C0%2C82.6276147%2C0l87.429382-50.6834642c31.7057791-20.0809243%2C34.5833581-54.505447%2C34.5833581-54.505447v-100.4135968c0-52.5988605-35.5455469-72.6798321-35.5455469-72.6798321%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")}
:root{--foto:url("/img/foto-werkstatt.jpg");--foto-sm:url("/img/foto-werkstatt-900.jpg")}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  :root{--foto:image-set(url("/img/foto-werkstatt.webp") type("image/webp"),
                         url("/img/foto-werkstatt.jpg") type("image/jpeg"));
        /* Schmale Variante fürs Handy: das 2000px-Original sind 144 KB für eine
           Fläche von 390px Breite. Die 900px-Fassung wiegt als WebP 37 KB. */
        --foto-sm:image-set(url("/img/foto-werkstatt-900.webp") type("image/webp"),
                            url("/img/foto-werkstatt-900.jpg") type("image/jpeg"))}
}

/* ====================================================== CI-TOKENS
   Quelle: 21it-branding Skill. Werte aus den Logo-Originaldateien.
   Nicht überschreiben — das ist die CI, keine Designentscheidung. */
:root{
  --bordeaux:#8E1538;
  --bordeaux-dk:#71102D;
  --bordeaux-tint:#F6E9ED;
  --anthracite:#323E48;
  --anthracite-dk:#232C33;
  --anthracite-soft:#5B6670;
  --surface:#F1F2F3;
  --white:#fff;
  --font:"Montserrat","Segoe UI",system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px);
  --maxw:1160px;
  /* Höhe der Anruf-Leiste auf Mobil: reserviert den Freiraum unter dem Inhalt
     UND positioniert den Consent-Widerruf-Button darüber. Ein Wert, zwei Stellen. */
  --sticky-h:62px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--anthracite);
  font-family:var(--font);font-weight:400;
  font-size:clamp(16.5px,1vw + 14px,18px);line-height:1.66;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative}

h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.01em;
  text-transform:uppercase;margin:0;
  /* Lange deutsche Komposita ("Schraubenschlüssel") sind auf Handybreite
     breiter als die Textspalte. Ohne Trennung ragen sie heraus und machen
     das GANZE Dokument horizontal scrollbar. lang="de" am html-Element
     liefert die Trennstellen. break-word ist die Rückfallebene für
     Browser ohne deutsche Trennmuster. */
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
h1{font-size:clamp(40px,7.6vw,92px)}
h2{font-size:clamp(30px,4.2vw,56px)}
h3{font-size:clamp(19px,1.3vw + 14px,25px);font-weight:700;letter-spacing:0}
.eyebrow{font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--anthracite-soft);margin:0 0 16px}

/* Bordeaux-Balken: die einzige Verwendung der Markenfarbe auf dunklem Grund,
   die genug Kontrast hat. Als Schrift ist Bordeaux auf Anthrazit unlesbar. */
.bar{display:block;width:clamp(120px,18vw,232px);height:10px;
  background:var(--bordeaux);margin:18px 0 0}
.bar.on-bordeaux{background:var(--anthracite)}

/* ====================================================== KOPF & HERO */
.dark{background:var(--anthracite);color:var(--white)}
/* Muster als Hintergrundbild statt inline: wird einmal geladen und gecacht,
   statt in jeder Sektion erneut im HTML zu stehen. */
.hexbg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  background-image:url("/img/hexmuster.svg");background-repeat:no-repeat;
  background-position:right -8% top 0;background-size:auto 118%;opacity:.075}
.apply .hexbg{opacity:.09}
@media(max-width:760px){
  .hexbg{background-position:right -42% top 0;opacity:.06}
}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 0 8px;position:relative;z-index:2}
.topbar .logo{display:block;width:clamp(168px,20vw,236px)}
/* Das Logo ist ein <img>, kein Inline-SVG: ohne height:auto behält es die
   Höhe aus dem HTML-Attribut (206px), während max-width die Breite kappt.
   Das SVG skaliert dann proportional hinein und schwebt in Leerraum. */
.topbar .logo img,.topbar .logo svg{display:block;width:100%;height:auto}
.topcall{font-weight:600;font-size:14px;letter-spacing:.06em;text-decoration:none;
  border:1.5px solid rgba(255,255,255,.3);border-radius:4px;padding:11px 18px;
  white-space:nowrap;transition:background .18s,border-color .18s}
.topcall:hover,.topcall:focus-visible{background:var(--bordeaux);border-color:var(--bordeaux)}
@media(max-width:600px){.topcall{display:none}}

.hero{position:relative;padding:clamp(44px,6.5vw,88px) 0 0;z-index:1}
.hero .wrap>*{position:relative;z-index:2}
.kicker{font-weight:300;font-size:clamp(24px,3.2vw,38px);text-transform:uppercase;
  letter-spacing:.06em;color:rgba(255,255,255,.78);margin:0 0 2px}
.hero h1{margin:0}
.tags{font-weight:300;font-size:clamp(15px,1vw + 12px,19px);
  color:rgba(255,255,255,.7);margin:26px 0 0}
.lede{max-width:35em;font-size:clamp(17px,.6vw + 15px,20px);
  color:rgba(255,255,255,.88);margin:22px 0 32px}

.cta{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:clamp(38px,5vw,60px)}
.btn{display:inline-flex;flex-direction:column;text-decoration:none;font-weight:700;
  text-transform:uppercase;font-size:clamp(16px,.9vw + 12px,20px);letter-spacing:.02em;
  padding:15px 26px;border-radius:4px;border:2px solid transparent;
  transition:transform .16s,background .18s,border-color .18s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn-1{background:var(--bordeaux);color:var(--white)}
.btn-1:hover,.btn-1:focus-visible{background:var(--bordeaux-dk)}
.btn-2{color:var(--white);border-color:rgba(255,255,255,.34)}
.btn-2:hover,.btn-2:focus-visible{border-color:var(--white)}
.btn small{font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;
  opacity:.8;margin-top:3px}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;
  border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:2}
.facts>div{padding:26px clamp(20px,2.4vw,34px) 30px 0;
  border-right:1px solid rgba(255,255,255,.16)}
/* Erste Spalte bleibt am Textrand ausgerichtet, ab der zweiten Abstand zur Linie. */
.facts>div+div{padding-left:clamp(20px,2.4vw,34px)}
.facts>div:last-child{border-right:0;padding-right:0}
.facts dt{font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,.8vw + 11px,19px);letter-spacing:.01em;line-height:1.22;
  /* Rückfallebene: zwei Titelzeilen reservieren, damit der Text darunter
     nicht springt, wenn ein Titel umbricht. */
  min-height:2.44em}
.facts dd{margin:6px 0 0;font-weight:300;font-size:15px;color:rgba(255,255,255,.72)}
/* Moderne Browser: Titel- und Textzeile aller Spalten teilen sich dieselben
   Zeilen des Elterngrids. Dann ist die Höhe exakt gleich, ohne Reservierung. */
@supports(grid-template-rows:subgrid){
  .facts{grid-template-rows:auto auto}
  .facts>div{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  .facts dt{min-height:0}
}
@media(max-width:760px){
  .facts{grid-template-columns:1fr;grid-template-rows:none}
  .facts>div,.facts>div+div{display:block;border-right:0;
    border-bottom:1px solid rgba(255,255,255,.16);padding:18px 0}
  .facts>div:last-child{border-bottom:0}
  .facts dt{min-height:0}
}

/* ====================================================== FOTOBAND
   Standard: echtes Foto als Hintergrund, Claim als HTML-Text darüber. Der Text
   ist nicht ins Bild gebrannt — dadurch skaliert er, ist markierbar, wird
   vorgelesen und lässt sich ändern, ohne das Bild neu zu rendern.
   Ohne Foto trägt .photo--claim die Fläche allein. */
.photo{background:var(--anthracite-dk);position:relative;overflow:hidden}
.photo .wrap{padding-top:0;padding-bottom:0}

.photo--claim,.photo--foto{padding:clamp(46px,6vw,86px) 0}
.photo--claim .hexbg{opacity:.06}

/* Auf breiten Schirmen wird das Band flacher als das Bild (2,40) und schneidet
   deshalb senkrecht. Der Anker bei 32 % hält Gerätereihe und Roll-ups im Bild —
   mit "bottom" bliebe bei 2560 px nur noch Betonboden übrig.
   Die Mindesthöhe verhindert zusätzlich, dass das Band zum Schlitz wird; sie
   greift erst oberhalb von etwa 1600 px, wo die Texthöhe nicht mehr trägt. */
.photo--foto{background-image:linear-gradient(
    to right,rgba(35,44,51,.88) 0%,rgba(35,44,51,.74) 52%,rgba(35,44,51,.58) 100%),
  var(--foto);
  background-size:cover,cover;
  background-position:center,center 32%;
  background-repeat:no-repeat,no-repeat;
  min-height:clamp(300px,24vw,560px);
  display:grid;align-content:center}
.photo--foto>.wrap{width:100%}
@media(max-width:760px){
  .photo--foto{background-image:linear-gradient(
      to bottom,rgba(35,44,51,.92) 0%,rgba(35,44,51,.78) 58%,rgba(35,44,51,.62) 100%),
    var(--foto-sm);
    /* Schmal ist das Band höher als breit — dort wird seitlich beschnitten,
       die senkrechte Lage spielt keine Rolle. Mindesthöhe zurücknehmen. */
    min-height:0}
}

.claim{position:relative;z-index:2;margin:0;max-width:22em}
.claim b{display:block;font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,58px);line-height:1.04;letter-spacing:-.01em;
  color:var(--white)}
.claim .bar{margin:20px 0 0}
.claim span{display:block;margin-top:18px;font-weight:300;
  font-size:clamp(16px,.6vw + 14px,19px);color:rgba(255,255,255,.82)}

/* ====================================================== BENTO-RASTER
   Vier Fotos, jedes in einem Verhältnis, das es ohne starken Beschnitt trägt.
   Kein Verlauf über den Bildern — bei Gesichtern wäre Abdunklung widersinnig,
   deshalb steht der Text über dem Raster, nicht darin.
   Breite Kacheln geben das Verhältnis vor; die einspaltigen füllen die
   Zeilenhöhe über object-fit, dadurch stimmen die Höhen bei jeder Breite.

   Heller Grund, aus zwei Gründen: er bricht den langen dunklen Block aus
   Benefits und Raster auf, und Fotos wirken auf hellem Untergrund klarer.
   Nicht reines Weiß, sondern das Flächengrau der CI — dadurch grenzen sich
   die hellen Bildkanten ab, und der Abschnitt unterscheidet sich vom weißen
   Aufgabenteil weiter oben. */
.team{background:var(--surface);position:relative}
.team .sec-h{margin-bottom:clamp(26px,3.4vw,44px)}
.team .sec-h p{font-weight:300;max-width:32em}

.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px)}
.bento figure{margin:0;border-radius:6px;overflow:hidden;background:#DCDFE2;
  min-height:0}
.bento picture,.bento img{display:block;width:100%;height:100%;object-fit:cover}
.b-team{grid-column:span 2;aspect-ratio:16/9}
.b-bespr{grid-column:span 2;aspect-ratio:2.4}

@media(max-width:820px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-team{grid-column:span 2}
  .b-bespr{grid-column:span 2;aspect-ratio:2}
  .b-masch{aspect-ratio:1}
  .b-buero{aspect-ratio:1}
}
@media(max-width:520px){
  .bento{grid-template-columns:1fr}
  .b-team,.b-bespr{grid-column:span 1}
  .b-bespr{aspect-ratio:3/2}
  /* Das Maschinenfoto ist quadratisch — bei 3:2 würde die Höhe des Geräts
     wegfallen, also das, was das Motiv ausmacht. */
  .b-masch{aspect-ratio:1}
  .b-buero{aspect-ratio:3/2}
}

/* ====================================================== INHALT */
section{padding:clamp(54px,7vw,100px) 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:880px){.cols{grid-template-columns:1fr}}
/* Rückfallebene: drei Überschriftzeilen reservieren, damit die Listen beider
   Spalten auf derselben Höhe beginnen. */
@media(min-width:881px){.cols>div h2{min-height:3.06em}}

/* Listenzeichen ist das Marken-Hexagon, kein Punkt und kein Häkchen. */
.mk{list-style:none;margin:26px 0 0;padding:0}
.mk li{position:relative;padding:0 0 0 42px;margin:0 0 18px}
.mk li::before{content:"";position:absolute;left:0;top:.36em;width:20px;height:21.4px;
  background:var(--bordeaux);
  -webkit-mask:var(--hex) no-repeat center/contain;
  mask:var(--hex) no-repeat center/contain}
.dark .mk li::before{background:var(--white)}

.note{background:var(--bordeaux-tint);border-left:5px solid var(--bordeaux);
  padding:22px 26px;margin-top:28px;border-radius:0 4px 4px 0}
.note strong{display:block;font-weight:700;text-transform:uppercase;font-size:20px;
  margin-bottom:6px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.note p{margin:0;font-size:16.5px}

/* Moderne Browser: Eyebrow, Überschrift, Liste und Hinweiskasten teilen sich
   spaltenübergreifend dieselben Zeilen des Elterngrids. Damit sitzen die
   Listen exakt auf einer Höhe, unabhängig von der Länge der Überschriften. */
@supports(grid-template-rows:subgrid){
  .cols{grid-template-rows:auto auto auto auto}
  .cols>div{display:grid;grid-template-rows:subgrid;grid-row:span 4}
  .cols>div h2{min-height:0}
  @media(max-width:880px){
    .cols{grid-template-rows:none}
    .cols>div{display:block}
  }
}

/* ====================================================== BENEFITS */
.bene{background:var(--anthracite);color:var(--white);position:relative}
.bene .eyebrow{color:rgba(255,255,255,.55)}
.bene .sub{max-width:34em;font-weight:300;color:rgba(255,255,255,.78);margin:22px 0 0}
/* Die drei gelebten Zusagen als geschlossenes Bordeaux-Band. Dreierteilung ist
   fix, damit die Gruppe nicht je nach Fensterbreite auseinanderfällt. */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.3);margin-top:clamp(32px,4vw,52px);
  border-radius:6px;overflow:hidden;position:relative;z-index:2}
.band>div{background:var(--bordeaux);padding:clamp(24px,2.4vw,34px)}
.band b{display:block;font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,.9vw + 13px,21px);letter-spacing:.01em;line-height:1.22;
  /* Lange deutsche Komposita müssen trennen dürfen, sonst laufen sie aus der
     Spalte heraus. */
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;min-height:2.44em}
.band p{margin:12px 0 0;font-weight:300;font-size:15.5px;color:rgba(255,255,255,.94)}
@supports(grid-template-rows:subgrid){
  .band{grid-template-rows:auto auto}
  .band>div{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  .band b{min-height:0}
}
@media(max-width:820px){
  .band{grid-template-columns:1fr;grid-template-rows:none}
  .band>div{display:block}
  .band b{min-height:0}
}

/* Der Rest sind Standardleistungen. Als Liste statt als Karten: kein toter
   Raum durch gleich hohe Kästen, und die Hierarchie stimmt. */
.mk.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 clamp(28px,4vw,60px);margin-top:clamp(34px,4vw,54px);
  position:relative;z-index:2}
.mk.two li{margin-bottom:22px}
.mk.two b{display:block;font-weight:700;text-transform:uppercase;font-size:15px;
  letter-spacing:.05em;margin-bottom:1px;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.mk.two span{font-weight:300;font-size:15.5px;color:rgba(255,255,255,.76)}

/* ====================================================== BEWERBUNG */
.apply{background:var(--bordeaux);color:var(--white);position:relative}
.apply .lede2{max-width:33em;font-weight:300;
  font-size:clamp(17px,.6vw + 15px,20px);margin:24px 0 0;position:relative;z-index:2}
.contact{background:var(--anthracite);border-radius:6px;overflow:hidden;
  margin-top:clamp(30px,4vw,46px);position:relative;z-index:2}
.contact .top{height:9px;background:var(--bordeaux)}
.contact .inner{padding:clamp(26px,3.2vw,42px);display:grid;
  grid-template-columns:1fr auto;gap:26px;align-items:end}
@media(max-width:760px){.contact .inner{grid-template-columns:1fr;align-items:start}}
.contact .who{font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 10px}
.contact .name{font-weight:700;font-size:clamp(26px,2.4vw,38px);text-transform:uppercase;
  margin:0 0 16px}
.contact a.tel{display:block;font-weight:800;font-size:clamp(30px,4.2vw,52px);
  color:var(--white);text-decoration:none;letter-spacing:-.01em;line-height:1.05}
.contact a.mail{display:inline-block;margin-top:12px;
  font-size:clamp(16px,.9vw + 12px,20px);color:var(--white);text-decoration:none;
  border-bottom:2px solid var(--bordeaux);padding-bottom:2px}
.contact .hours{font-weight:300;font-size:15px;color:rgba(255,255,255,.66);margin:16px 0 0}
.contact .hex{width:56px;height:60px;background:var(--bordeaux);flex:0 0 auto;
  -webkit-mask:var(--hex) no-repeat center/contain;mask:var(--hex) no-repeat center/contain}

/* ====================================================== FUSS */
footer{background:var(--anthracite-dk);color:rgba(255,255,255,.68);
  font-weight:300;font-size:15px;padding:46px 0 62px}
footer a{color:rgba(255,255,255,.86)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.fgrid b{display:block;color:var(--white);font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;color:rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:8px 22px}

/* Sticky-Anruf auf Mobil: Der Traffic kommt aus WhatsApp und Instagram,
   also vom Telefon. Ein Tap vom Lesen zum Gespräch. */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--bordeaux);box-shadow:0 -6px 24px rgba(0,0,0,.3)}
.sticky a{display:flex;align-items:center;justify-content:center;
  padding:16px;color:var(--white);text-decoration:none;font-weight:800;
  /* Muss auf der schmalsten Handybreite einzeilig bleiben: zweizeilig wird die
     Leiste höher als das reservierte padding-bottom des body und verdeckt
     Inhalt. Bei 320px ergibt 4.6vw ~14.7px, die Zeile passt. */
  font-size:clamp(15px,4.6vw,19px);text-transform:uppercase;letter-spacing:.02em;
  /* Feste Zeilenhöhe statt der geerbten 1.66: sonst wächst die Leiste über die
     unten reservierten 62px hinaus und verdeckt den Seitenfuß. */
  line-height:1.25;white-space:nowrap}
@media(max-width:600px){
  .sticky{display:block}
  body{padding-bottom:var(--sticky-h)}
  /* Der Consent-Widerruf-Button des CMP liegt fix unten links (z-index ~2 Mrd.)
     und verdeckt sonst den Anfang des Anruf-Textes. Verstecken ist keine Option:
     Der Widerruf muss so einfach möglich sein wie die Einwilligung. Er wandert
     deshalb über die Leiste — dieselbe Variable wie der Freiraum unten, damit
     beide Werte nicht auseinanderlaufen. */
  .cc-revoke.cc-bottom{bottom:var(--sticky-h)!important}
}

/* Skip-Link: liegt außerhalb des Sichtfelds und springt erst bei Tastatur-Fokus
   herein. display:none oder visibility:hidden wären falsch — beides nimmt das
   Element aus der Tab-Reihenfolge, der Link wäre nie erreichbar. */
.skip-link{position:absolute;left:8px;top:-60px;z-index:100;
  background:var(--bordeaux);color:var(--white);text-decoration:none;
  font-weight:700;font-size:15px;padding:12px 20px;border-radius:0 0 4px 4px;
  transition:top .15s}
.skip-link:focus{top:0}

:focus-visible{outline:3px solid var(--bordeaux);outline-offset:3px}
.dark :focus-visible,.apply :focus-visible{outline-color:var(--white)}

.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* ============================================ Rechtstextseite */
.legal-page{max-width:46em;margin:0 auto;padding:clamp(40px,6vw,88px) var(--pad)}
.legal-page h1{font-size:clamp(28px,3.4vw,44px);margin-bottom:8px}
.legal-page h2{font-size:clamp(19px,1.4vw + 13px,25px);margin:38px 0 10px}
.legal-page p,.legal-page li{color:#3C424E}
.legal-page ul{padding-left:22px}
.legal-page .back{display:inline-block;margin-top:44px;font-weight:700;
  text-transform:uppercase;font-size:15px;letter-spacing:.04em;
  color:var(--bordeaux);text-decoration:none;border-bottom:2px solid var(--bordeaux)}
.legal-page .meta{font-weight:300;color:var(--anthracite-soft);font-size:15px}